带有大背景图像的 chrome 滚动不流畅答案

【问题标题】：Choppy scrolling in chrome with big background images带有大背景图像的 chrome 滚动不流畅
【发布时间】：2012-10-31 14:14:09
【问题描述】：

我创建了一个网页，它有 7 个六个部分，使用 background-size: cover; 使用巨大的背景图像。它在除 Google Chrome（所有版本/所有平台）之外的所有浏览器中都能正常工作。当我尝试在 google chrome 中滚动页面或单击其链接（他们也使用 $.scrollTo 滚动页面）时，页面变得不稳定且滞后，并且滚动缓慢并使用 100% 的 CPU。

我已上传该页面，以便您对其进行测试：http://baaemail.com/beta（稍后我将删除该页面）。甚至 IE9/10 也很好，但 chrome 变得不稳定。

该页面绑定了几个“滚动”事件，我尝试完全禁用 javascript，但它并没有变得更好，所以它不是来自滚动事件。

我正在使用background-size: cover，因为它完全按照我想要的方式塑造照片，并且我希望修复图像，这就是为什么我不能使用其他方法，例如使用img 标签而不是背景。

我该怎么办？谢谢。

【问题讨论】：

Google Chrome 浏览器的大部分时间都是这样运行的。老实说，它对我来说运行得很好。我唯一的建议是尝试压缩图像。

标签： css google-chrome scroll background-image

【解决方案1】：

我为自己找到的一个具有类似行为的网站的解决方案是为那些包含巨大背景图像的 div 添加 background-repeat:no-repeat css 属性。

您还可以检查您是否有重复的 body 或 html 的背景图像，对我来说，最大的问题是重复的图案图像严重干扰了 google chrome 的滚动性能。

此外，如果您在这些“幻灯片”上使用 CSS 过渡，您应该检查那些没有分配给“全部”。如果您只为“left”属性进行转换，那么将其分配给“all”是没有意义的。

我不确定仅此一项是否会对您有所帮助，但压缩图像和脚本始终是一种好习惯。

这些东西对我有用。希望对您有所帮助。

【讨论】：