在带有大背景图像的铬中滚动滚动

Question

我创建了一个网页，并且它有7个使用background-size: cover;的巨大背景图像的六个部分。它可以在除Chrome浏览器（所有版本/所有平台）以外的所有浏览器中正常运行。当我尝试在谷歌浏览器中滚动页面或点击链接（他们也使用$ .scrollTo滚动页面）时，页面会变得波涛汹涌，并且缓慢滚动并使用100％的CPU。

我已经上传了页面，以便测试它：http://baaemail.com/beta（我将在稍后删除页面）。即使IE9/10是好的，但铬变得波涛汹涌。

页面上有几个“滚动”事件绑定到它，我试图完全禁用JavaScript，但它并没有得到更好，所以它不是从滚动事件。

我使用background-size: cover，因为它形状酷似我希望它的照片，我想要的形象是固定的，这就是为什么我不能用其他方法，如使用img标签，而不是背景。

我该怎么办？ 谢谢。

Answer 1

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

您还可以检查是否有重复的body或html的背景图像，对我来说，最大的问题是重复的图案图像，谷歌浏览器的滚动性能显着干扰。

另外，如果您在这些“幻灯片”上使用CSS转换，则应检查这些转换未分配给“全部”。如果您只是为“左”属性进行过渡，则没有为“全部”分配它的要点。

我不确定这是否会帮助你，但压缩图像和脚本总是一个好习惯。

这东西为我做了诡计。希望能帮助到你。