Geek Answers Handbook

Changing the background attachment while scrolling causes graphical crashes in WebKit

I have the following problem.

I created a website with this structure:

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

The content has a background image set to be fixed at the bottom. Now, when you scroll down, the image scrolls by the footer. To prevent this from happening, I wrote a short script to automatically set the attachment for scrolling when presenting the footer:

$(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;
    }
});

. IE , Chrome (WebKit , ) . , . , . , .

- ?

+5
1

-. .

-webkit-transform css.

.

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

+1

More articles:


All Articles