Почему Firefox не рендерит этот линейный градиент, когда значения размера фона превышают 255 пикселей?

Question

Я пытаюсь создать наложение сетки, используя абсолютно позиционируемый невзаимодействующий элемент div. Я пытаюсь сделать это с помощью атрибута повторяющегося линейного градиента, как я видел в другом месте для этого решения. Реализация этой функции прекрасно работает в Chrome, но мне кажется, что для совместимости с Firefox мне нужен какой-то тип polyfill - или я делаю что-то не так.

Чтобы просмотреть проблему, в самой последней версии Firefox (52, хотя и другие версии также показывают мою проблему) и доступ к этому jsfiddle:

https://jsfiddle.net/g5v0o7ks/4/

результирующий css в вопросе:

background-size: 256px 256px;
background-image: 
    repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%), 
    repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%);

увеличивайте каждый из входов на 1 каждый. Уменьшить их тоже. Линейные градиенты полностью исчезают при превышении 255 пикселей, что, похоже, не происходит в Chrome. Я также пытался обрабатывать это с процентными значениями, но градиенты по-прежнему исчезают за жесткий предел в 255 пикселей.

Я предполагаю, что эта проблема не является предполагаемым поведением, так как размер фона не имеет какого-либо определенного ограничения в пикселях на странице MDN. Кто-нибудь сталкивался с этой проблемой раньше, или вы заметили ошибку в моем коде, из-за которой jsfiddle не работает должным образом?

Answer 1

Ваша проблема возникает в Chrome (v.58 - 64-разрядная версия), а также на компьютере с Linux. Обходной путь должен изменить ваш background-image от:

 background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%),   repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), black calc(100% - 1px), black 100%)

... все 1px экземпляры заменены на 2px):

 background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%),   repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 2px), black calc(100% - 2px), black 100%)

... когда между 256px и 511px. Не проверял, но я предполагаю ... - 3px... собирается работать до 767px,

Вы видите образец здесь? Как и следовало ожидать, это работает и в Firefox.

Зачем? Бьет меня! Но я считаю, что это как-то связано с субпиксельным рендерингом. Я знаю, это не должно (в конце концов, вы вычитаете 1px) но вот почему веб велик, не так ли?