当 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%)

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

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

为什么？打败我！但我认为它与亚像素渲染有关。我知道，它不应该（毕竟，你在扣除 1px）但这就是网络伟大的原因，不是吗？

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

Why does firefox not render this linear gradient when the background-size values exceed 255px?

javascript

css

firefox

background-image

repeating-linear-gradient