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像素时，线性渐变完全消失，这似乎不会发生在铬中。我也试过用百分比值来处理这个问题，但渐变仍然会在难以达到的像素限制上消失。

我认为此问题不是预期的行为，因为后台大小在MDN页面上没有任何明显的像素限制。有没有人遇到过这个问题，或者您是否注意到我的代码中的错误导致jsfiddle无法按预期运行？

Answer 1

你的问题也发生在Linux机器上的Chrome（v.58 - 64位）中。解决方法是修改您的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%)

... to（所有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），但这就是网络盛大的原因，不是吗？

当背景大小值超过255px时，为什么firefox不呈现此线性渐变？

1 个答案: