Jerky Parallax in IE7-8

问题

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.

回答1:

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

If it disabled - it is normal.

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).

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.

UPDATE

For more performance you can do this things:

Write your own code without plugins
Build events calls based on current scrollTop interval, not on every scroll call
Cache jquery nodes at the beginning
Main principle - less node manipulations = more performance

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

回答2:

I know that it's a bit late to answer this but it might help people in the future - the problem is that you're using:

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

to make the images behind the parallax fullscreen, you need to use another method.

Remove this code your parallax will be lovely and smooth.

来源：https://stackoverflow.com/questions/11709225/jerky-parallax-in-ie7-8

标签

javascript

jquery

html

css

parallax