Stuttering background image IE

Question

I have a problem concerning changing the background position with jQuery. The website I am working on (http://www.jeroenrood.nl/GortzFruit), has a scrolling animation (either scrollwheel or on anchor click), and the top position of the img-tag in the background changes slowlier than the scrolling speed.

This creates a fluent parallax scrolling effect in Chrome and Firefox, but not in Internet Explorer. In IE (regardless which version) this effect stutters a lot (as can be seen at the aforementioned link).

This is the code that I use, concerning the parallax scrolling effect (HTML):

<div style='height:1000px;background-color:#333;position:relative;' id='page1'>

    <img src='images/bg1.png' alt='' style='display:inline;position:absolute;top:-60px;left:0px;width:100%;z-index:0;' class='background' />   

</div>

And this is the javascript/jQuery code:

var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();

$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        //if the first page is in the viewport
        if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
            newOffset = -60 + ((scrollTop - page1)*0.8);
            $('#page1 .background').css('top',newOffset);
        }
});

Somehow IE seems to lag in processing this position of the image and applying it. Does anyone have an idea of how to make IE have a similar smooth scrolling effect as Chrome or Firefox?

Thanks in advance,

Jeroen

---

Edit:

Okay, I am on my way to finding the solution!

I tried background-attachment:fixed, which did not result in stuttering in IE. Then I thought, well, this css could be combined with the parallax effect. There are gaps in the transition in IE that cause the stuttering, so maybe I can bridge them with background-attachment:fixed.

This seems to work! Now it even is a fluent animation in IE. Even with a massive background image.

This is the code (HTML):

<div style='height:1000px;background-color:#333;position:relative;text-align:center;' id='page1'>

    <div class='background' style='display:inline;position:absolute;top:-60px;left:0px;height:1000px;width:2000px;z-index:0;background-image:url(images/bg1.png);background-repeat:no-repeat;background-position:left -60px;background-attachment:fixed;'></div>   

</div>

And this is the relevant javascript/jQuery code:

var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();
$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        //if the first page is in the viewport
        if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
            newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px";
            $('#page1 .background').css('background-position',newOffset);
        }
});

Answer 1

Make this image a lot smaller. It is 2000×2386 pixels and 8.3MB large. You could make it 1000×1193 pixels and convert it to JPEG. JPEG compresses photos better than PNG. Browsers can process small images a lot faster than large images.