在镀铬物的浪漫的滚动与大背景图象

时间:2012-10-31 14:14:09

标签: css google-chrome scroll background-image

我创建了一个网页,它有7个六个部分,使用background-size: cover;创建了巨大的背景图像。它适用于除谷歌浏览器(所有版本/所有平台)以外的所有浏览器。当我尝试在谷歌浏览器中滚动页面或点击其链接(他们也使用$ .scrollTo滚动页面)时,页面变得不连贯且滞后,它会缓慢滚动并使用100%CPU。

我上传了该页面,因此您可以对其进行测试:http://baaemail.com/beta(我稍后会删除该页面)。即使是IE9 / 10也没关系,但镀铬会变得不稳定。

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

我正在使用background-size: cover,因为它完全按照我想要的方式对照片进行整形,我想要修复图像,这就是为什么我不能使用其他方法,例如使用img标记代替背景

我该怎么办? 感谢。

1 个答案:

答案 0 :(得分:0)

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

您还可以检查是否有重复的bodyhtml背景图片,对我来说,最大的问题是重复的图案图片会严重干扰Google Chrome的滚动效果。

此外,如果您在这些“幻灯片”上使用CSS过渡,则应检查那些未分配给“全部”。如果你只为“左”属性进行过渡,那么就没有必要为“所有”分配它。

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

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