1

我正在尝试使用绝对定位的不可交互 div 创建网格覆盖。我正在尝试使用 repeating-linear-gradient 属性来完成此操作，正如我在其他地方为该解决方案所建议的那样。此功能的实现在 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 无法按预期运行？

4

1 回答 1

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

...到（所有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 很盛大，不是吗？

于 2017-05-03T21:31:50.393 回答