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

标签 html css google-chrome

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

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

最佳答案

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

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

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

检查这个explanationthis one了解更多信息。

关于html - Chrome 在使用 CSS background-size :cover in scrolling background image 时滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33229840/

相关文章:

javascript - myContext.clearRect(0, 0, 500, 700);未正确清除 Canvas

php - 换行符即\n 在 mozilla firefox 中失败但在 Chrome 中有效

html - Adam Freeman 书中的 CSS 特异性查询

css - Woocommerce - [product_categories] 简码 - 如何从列表中排除两个类别?

css - 执行时第一行的内联样式消失

css - Chrome 开发工具间歇性地无法显示样式

css - div高度问题

css - 使用 Angular Material 时无法对齐复选框

css - 媒体查询彩色单色和打印

JavaScript 执行时间轴