html - Chrome 在使用 CSS background-size :cover in scrolling background image 时滞后

Question

我有一张背景图片正在我的页面部分滚动。但是，为了相同质量的背景图像支持不同的设备屏幕，我使用了 css 属性 background-size:cover 就可以了。当我使用此属性时，唯一的问题是谷歌浏览器滞后。删除此属性会使 chrome 恢复其良好性能。

我该怎么办？我在网上搜索了这个问题，并使用 JQUERY 找到了一些解决方案。但是，如果可能的话，我想使用纯 CSS 来完成。

Answer 1

我在使用多张高分辨率图像时遇到了同样的问题，我在元素中添加了:

-webkit-transform: translate3d(0,0,0);

这不是在所有情况下都是最好的技巧，但它可以提高性能。它将使用 GPU 来处理渲染。

检查这个explanation和 this one了解更多信息。