IE7-8中的生涩视差 [英] Jerky Parallax in IE7-8

问题描述

我已经将基本的视差效果引入了我正在开发的站点中.它可以在Chrome，Firefox和IE9中顺利运行；但是在IE7和IE8中确实很生涩.我看过的网站要复杂得多，我看不到像混蛋"这样的东西.我只使用了两张顶部带有扫描线纹理的图像.

I've introduced a basic parallax effect into a site that I'm developing. It runs smoothly in Chrome, Firefox and IE9; but it's really jerky in IE7 and IE8. I've looked at far more complicated sites and I don't see anything like the 'jerkiness' that I'm getting. I'm only using two images with a scanline texture over the top.

任何想法可能是什么原因造成的?

Any ideas what might be causing this?

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

任何帮助表示感谢，谢谢.

Any help appreciated, thanks.

推荐答案

请检查此设置(在注释中)

Please check this setting (in comments) How can I check browser smooth scrolling support via Javascript? .

如果禁用-这是正常的.

If it disabled - it is normal.

据我了解，这 http://www.ianlunn.co. uk/demos/recreate-nikebetterworld-parallax/是示例，而不是您的代码.而且，如果禁用了平滑滚动，则具有生涩"的效果(我禁用了Chrome，Opera和IE8的平滑滚动).

As I understand this http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/ is example, not your code. And if smooth scrolling is disabled - it has "jerky" effect (I have disabled smooth scrolling is Chrome, Opera and IE8).

滚动原理的原因.如果此设置被禁用-它的作用类似于永久+ 100px .如果启用-就像每50毫秒10次，每次+ 10px .

Reason in scrolling principle. If this setting is disabled - it works like permanent +100px. If it is enabled - it works like 10 times per 50ms, each time +10px.

更新

要获得更高的性能，您可以执行以下操作:

For more performance you can do this things:

• 编写没有插件的自己的代码

• Write your own code without plugins

基于当前scrollTop间隔构建事件调用，而不是基于每个滚动调用

Build events calls based on current scrollTop interval, not on every scroll call

在开头缓存jquery节点

Cache jquery nodes at the beginning

主要原理-更少的节点操作=更高的性能

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

I have written similar effect on jquery - you can see it here http://www.thecommoditycode.com/ambersoftware/ and use it principles

这篇关于IE7-8中的生涩视差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！