使用视差效果时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密集型页面，我猜测浏览器很难处理这些大元素的视差。尽量缩小，压缩并以较低的质量保存它们。