Zmiana załącznika tła podczas przewijania powoduje graficzne usterki w pakiecie WebKit

Question

Mam następujący problem.

I zbudował stronę internetową z tej struktury:

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

zawartość zestawu background-image pozostawać stały na dole. Teraz, gdy przewijasz w dół, obraz przewija się za stopką. Aby temu zapobiec, napisałem krótki skrypt, aby automatycznie ustawić przywiązanie do przewijania, gdy stopka wchodzi w widoku:

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

To rozwiązuje mój problem dość dobrze i działa w prawie wszystkich przeglądarkach. IE to żaden problem, tym razem wydaje mi się, że Chrome (w ogóle wygląda na WebKit) sprawia mi problemy. Podczas przewijania do dołu zmiana działa poprawnie. Podczas przewijania w górę iw dół, tło zaczyna wyświetlać graficzne usterki. Kiedy stopka powraca na dół, znów wygląda normalnie.

Czy ktoś może mi pomóc?

Answer 1

Miałem podobny problem na jednej stronie. Ale znalazłem rozwiązanie.

Spróbuj użyć usługi css o nazwie -webkit-transform.

patrz kod poniżej

#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. Przepraszam za mój angielski.