8

首先，这是我网站的链接，有我要描述的问题：

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

在 Firefox、IE 9、Opera、Safari、iOS 中，网站看起来很完美，运行流畅。问题出在 Chrome 和 Android 设备上，它们的滚动非常缓慢，并且使用视差效果的背景图像的动画效果不稳定。

我怀疑问题出在我的图像的 background-size:cover 和 background-attachment:fixed 属性上，但我还没有找到解决这个问题的方法。

您可以直接看到它，并在上面的链接中获得更好的想法。请帮忙; 我在完成这个项目的最后一步，这个错误真的让我退缩了。

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;
}
4

1 回答 1

8

我不相信您的问题出在 CSS 中，而是在 JS 中。

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

其次，使用开发人员的工具时间线分析您的帧活动，您可以看到帧丢失的确切点：

开发工具时间表

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

更新：

我认为罗伯特在评论中说得对：你的背景很重。由于它已经是一个庞大且 CPU 密集型的页面，我猜想浏览器很难处理如此大元素上的视差。尝试以较低的质量缩小、压缩和保存它们。

于 2013-11-01T20:11:00.937 回答