javascript - 当 background-size 值超过 255px 时，为什么 firefox 不渲染这个线性渐变？

Question

我正在尝试使用绝对定位的不可交互的 div 创建网格覆盖。我正在尝试使用重复线性渐变属性来完成此操作，正如我在其他地方看到的针对此解决方案的建议。此功能的实现在 Chrome 上运行良好，但我似乎需要某种 polyfill —— 或者我做错了什么 —— 以实现 firefox 兼容性。

要查看问题，请在最新版本的 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%)

...当介于 256 像素和 511 像素之间时。尚未测试，但我假设 ... - 3px... 将工作到 767px。

你看到这里的模式了吗？如您所料，这也适用于 Firefox。

为什么？打败我!但我认为它与亚像素渲染有关。我知道，它不应该(毕竟，您要扣除 1px)但这就是 web 伟大的原因，不是吗？