IE7-8中的Jerky Parallax

我已经在我正在开发的网站中引入了基本的视差效果。 它在Chrome,Firefox和IE9中运行顺畅; 但它在IE7和IE8中真的很生涩。 我看过更复杂的网站,我看不到像我那样的“急躁”。 我只使用两个顶部有扫描线纹理的图像。

可能导致这种情况的任何想法?

#intro { background: url(../img/graphics/top-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1024px; min-height: 768px; height: 100%; position: relative; } #second { background: url(../img/graphics/content-bg-2.jpg) center no-repeat fixed; position: relative; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1200px; min-height: 768px; height: 4800px; } 

任何帮助表示感谢,谢谢。

请检查此设置(在评论中) 如何通过Javascript检查浏览器平滑滚动支持? 。

如果它被禁用 – 这是正常的。

据我所知,这是http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/的例子,而不是你的代码。 如果平滑滚动被禁用 – 它具有“生涩”效果(我已禁用平滑滚动是Chrome,Opera和IE8)。

滚动原因的原因。 如果禁用此设置 – 它的工作方式类似于永久性+ 100px 。 如果它被启用 – 它每50ms工作10次​​,每次+ 10px


UPDATE

为了获得更多性能,您可以执行以下操作

  • 编写自己的代码而不插件

  • 根据当前的scrollTop间隔构建事件调用,而不是每次滚动调用

  • 在开头缓存jquery节点

  • 主要原则 – 减少节点操作=提高性能

我在jquery上写了类似的效果 – 你可以在这里看到它http://www.thecommoditycode.com/ambersoftware/并使用它原理

一些可能的方案:

http://www.franckmaurin.com/how-to-make-mouse-wheel-scroll-smooth-in-windows-os/这是专门针对Windows的

http://thelastdeveloper.tumblr.com/post/20536873534/fix-parallax-jumping-jerky-hinky-jinky-scrolling-on似乎适用于较旧的浏览器。

和Firefox的可能解决方案: http : //blog.keithclark.co.uk/faster-scrolling-parallax-websites-in-firefox/

我知道这是不好的发布链接,但我没有时间测试这些,所以不能提供任何建议,甚至他们的工作。

我知道回答这个问题有点晚了,但它可能会对未来的人有所帮助 – 问题在于你正在使用:

 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 

要使视差全屏后面的图像,你需要使用另一种方法。

删除此代码,您的视差将是可爱和平滑的。