Changing background-attachment while scrolling causes graphical glitches in WebKit

Question

I have the following problem.

I built a website with this structure:

<section id="content">
...
</section>
<footer>
...
</footer>

Content has a background-image set to stay fixed at the bottom. Now, when you scroll down, the image scrolls behind the footer. To prevent that, I wrote a short script to automatically set the attachment to scroll when the footer comes into view:

$(document).scroll(function () { 
    var curpos = $(window).scrollTop();
    var fooOffset = $('#foot').offset();
    var wh = $(window).height();

    if(curpos >= (fooOffset.top-wh) && fix == 0) {
        $('#content').css('background-attachment','scroll');
        fix = 1;
    } else if(curpos < (fooOffset.top-wh) && fix == 1){
        $('#content').css('background-attachment','fixed');
        fix = 0;
    }
});

This solves my problem pretty well and works in nearly all browsers. IE is no problem, this time Chrome (WebKit in general, it seems) gives me problems. When scrolling to the bottom, the change works correctly. When scrolling back up and down a bit, the background starts showing graphical glitches. When the footer returns to the bottom, it looks normal again.

Can somebody help me?

Answer 1

I had a similar problem on one website. But i found the solution.

Try to use -webkit-transform css property.

See code below

#mainBg {
    background:#F1F3F4 url(img/background2.jpg) center top no-repeat scroll;
    width:100%;
}

#mainBg.bottomFixed {
    background:#F1F3F4 url(img/background2.jpg) center bottom no-repeat fixed;
    -webkit-transform: rotate(0deg);
}

PS. Sorry for my english.