I have table with cells (td) with background images, on both mobile and desktop chrome it shows thin line between TD if table's absolute position is not aligned to round pixels.
// in case you don't see the glitch at 0.5px
var f = 0;
window.onclick = function() {
f += 0.3;
document.body.style.paddingLeft = f + 'px';
document.body.style.paddingTop = f + 'px';
};body {
background-color: white;
padding-left: 0.5px;
padding-top: 0.5px;
}
table {
border: 0;
border-collapse: collapse;
}
table.image td {
background-image: url(https://ghost.sk/chrome-error/purple.png);
height: 40px;
width: 40px;
}
table.solid td {
background-color: purple;
height: 40px;
width: 40px;
}
div.image {
background-image: url(https://ghost.sk/chrome-error/purple.png);
height: 40px;
width: 40px;
display: inline-block;
}Table with image bg (glitch both desktop and mobile):
<table class="image">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Table with solid bg (glitch usually only mobile):
<table class="image">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
On mobile it glitches for divs too (more likely with images than solid colors):
<div>
<div class="image">a</div><div class="image">b</div>
</div>
<div>
<div class="image">c</div><div class="image">d</div>
</div>Notes:
In demo I use 0.5px initial padding but in real code I am not intentionally setting it to fractions, it can happen any time, e.g. when centering table or when using padding-left 1em and then it depends on font.
In demo I'm using image filled with solid color to show it better (if it was solid color I wouldn't use image and besides on mobile it shows same glitch when using solid colors too).
It "feels" like OpenGL's error when "clamp to edge" is not set.
I'm not using tables in my original design, it's just is easier to trigger it with tables.
Here is screenshot how it look like: https://ghost.sk/chrome-error/screenshot.png
Tested on: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/69.0.3497.81 Chrome/69.0.3497.81 Safari/537.36
