Question

我的桌子上有带有背景图片的单元格（td），在移动设备和台式机Chrome上，如果桌子的绝对位置未与圆形像素对齐，则会在TD之间显示细线。

// 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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Table with solid bg (glitch usually only mobile):

<table class="image">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</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>

注意：

在演示中，我使用0.5px的初始填充，但在实际代码中，我并不是故意将其设置为分数，它可以随时发生，例如在居中表格或使用左填充1em时，取决于字体。
在演示中，我正在使用填充有纯色的图像来更好地显示它（如果是纯色，我将不使用图像，并且在移动设备上，使用纯色时也会显示相同的故障）。
当未设置“ clamp to edge”时，它像OpenGL的错误一样“感觉”。
我不是在原始设计中使用表格，而是通过表格触发它更容易。
以下是屏幕截图：https://ghost.sk/chrome-error/screenshot.png
测试于：Mozilla / 5.0（X11; Linux x86_64）AppleWebKit / 537.36（KHTML，如Gecko）Ubuntu Chromium / 69.0.3497.81 Chrome / 69.0.3497.81 Safari / 537.36

Answer 1

此问题指示为here。 Chrome会导致背景图像在每个单元格中重新启动，而不是在整行中流畅地流动。我希望在下一版的chrome中可以解决此问题。

Answer 2

我遇到了同样的问题，请看以下YouTube视频：https://youtu.be/y88k6khLGvs。就我而言，只有当滚动条显示在身体上时，才会出现灰色细线。

但是，找到了一个对我有用的解决方案。由于Chrome似乎在每个背景图片的末尾占用了1 px，因此我将背景CSS更改为此：

td
{
    background-repeat: repeat-x;
}

到

td
{
    background-size: 110% 100%;
    background-repeat: no-repeat;
}

它只是告诉Chrome超出TD的最后一个像素并正确呈现它。

Answer 3

我被这个错误困扰了一段时间，终于找到了一个简单的解决方案。只需在background-repeat: no-repeat上添加td。如果背景位于background-repeat: no-repeat上，则tr上的tr

如果表格具有TD背景图片，Chrome会显示细线

3 个答案: