使用视差效果时Chrome中的可怕延迟

Question

首先,这里是我网站的链接,有我要描述的问题:

http://themes.roussounelosweb.gr/cassiopeia/

在Firefox,IE 9,Opera,Safari,iOS中,该网站看起来很完美,并且运行顺畅.问题在于Chrome和Android设备,其中滚动非常滞后,并且使用视差效果的背景图像以笨重的方式制作动画.

我怀疑问题在于背景大小:封面和背景附件:我的图像的固定属性,但我还没有找到解决这个问题的方法.

您可以直接看到它,并在上面的链接上获得更好的主意.请帮忙; 我正在完成这个项目的最后一步,这个错误实际上阻碍了我.

section{

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
overflow:hidden;
}

section.section1{

background-image:url(../img/section1.jpg);
background-repeat:no-repeat;
color:#dedede;
text-shadow:1px 1px 5px rgba(0,0,0,0.8);
position:relative;
padding:20px 0px;
z-index:1;
overflow:hidden;
}

Answer 1

我不相信你的问题在CSS中,而是在JS中.

首先,我可以看到你正在使用nicescroll和parallax.js.可能是两者相互冲突 - 尝试从JS中删除nicescroll并检查它是否更好.

其次,使用开发人员的工具时间轴分析您的框架活动,您可以看到框架下降的确切位置:

当你滚动时,你正在发射33个计时器.您可能会尝试调试一些代码,从滚动事件中一次取消绑定一个回调并检查哪个是有问题的.

更新:

我认为罗伯特在评论中说得对:你的背景很重.由于它已经是一个庞大的CPU密集型页面,我猜测浏览器很难处理这些大元素的视差.尝试缩小,压缩并以较低的质量保存它们.