虽然 Firefox 正确地做到了这一点,但更新了linear-gradient
每一帧上的背景,chrome 似乎都会以“跳跃”的方式渲染事物,这意味着它只会在调整大小后每隔几个像素渲染一次数学上正确的布局。
演示游乐场 http://jsbin.com/tokuvo/edit?html,css,output
(尝试调整窗口大小)
/* draw 10 horizontal responsive lines in the background */
div{
background-image: linear-gradient(90deg, transparent calc(100% - 2px), #000 100%);
background-size: calc(100% / 10); /* 10 rows */
}
Chrome 上的背景大小未正确更新(GIF):
在 Firefox 上,一如既往,一切都运行良好:
这是一个简化的问题。我正在尝试使用响应式 css 背景渐变创建网格,但在 Chrome 中这证明很困难。
我试图避免使用大量 HTML 标记来完成此任务,因为网格大小是动态的。
有人知道在网格调整大小时帮助 Chrome 正确渲染背景大小的技巧吗?
Thanks.
更新 - 作为新发布bug https://bugs.chromium.org/p/chromium/issues/detail?id=604875
None
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)