css - 在带有大背景图像的 chrome 中滚动不连贯

Question

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

我已经上传了该页面，您可以对其进行测试:http://baaemail.com/beta (我稍后会删除该页面)。甚至 IE9/10 都很好，但 chrome 变得不稳定。

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

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

我该怎么办？谢谢。

Answer 1

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

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

此外，如果您在这些“幻灯片”上使用 CSS 转换，您应该检查这些幻灯片是否未分配给“全部”。如果您仅对“左”属性进行转换，则没有必要将其分配给“全部”。

我不确定这是否对您有帮助，但压缩图像和脚本始终是一个好习惯。

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