Chrome показывает тонкую линию, если таблица имеет фоновое изображение TD

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, а затем это зависит от шрифта.

• В демоверсии я использую изображение, заполненноесплошным цветом, чтобы показать его лучше (если бы это был сплошной цвет, я бы не использовал изображение, и к тому же на мобильном телефоне он показывает тот же сбой при использовании сплошных цветов).

• Это "чувствует"например, ошибка OpenGL, когда «зажим к краю» не установлен.

• Я не использую таблицы в своем оригинальном дизайне, просто проще вызвать его с помощью таблиц.

• Вот скриншот, как это выглядит: https://ghost.sk/chrome-error/screenshot.png

• Проверено на: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, как Gecko) UbuntuХром / 69.0.3497.81 Хром / 69.0.3497.81 Сафари / 537.36

Answer 1

Я застрял с этой ошибкой на некоторое время и, наконец, нашел простое решение.Просто добавьте background-repeat: no-repeat на td.background-repeat: no-repeat на tr, если фон на tr

Answer 2

У меня была такая же проблема, посмотрите это видео на Youtube: https://youtu.be/y88k6khLGvs. В моем случае тонкие серые линии появлялись только тогда, когда полоса прокрутки показывалась на теле.

Но,нашел решение, которое сработало для меня.Поскольку кажется, что Chrome занимает 1 пиксель в конце каждого фонового изображения, я изменил свой фоновый CSS с этого:

td
{
    background-repeat: repeat-x;
}

на

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

Это просто говорит Chrome выходить за рамкипоследний пиксель TD и отображает его правильно.

Answer 3

Эта проблема обозначена здесь .Хром заставляет фоновое изображение перезапускаться в каждой ячейке, а не течет приятно непрерывно для всей строки.Я надеюсь, что это будет исправлено в следующих версиях Chrome.