La modifica dello sfondo-allegato durante lo scorrimento causa glitch grafici in WebKit

Question

Ho il seguente problema.

ho costruito un sito web con questa struttura:

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

Content ha una serie background-image di rimanere fissato alla parte inferiore. Ora, quando si scorre verso il basso, l'immagine scorre dietro il piè di pagina. Per evitare questo, ho scritto un breve script per impostare automaticamente l'allegato per scorrere quando il piè di pagina entra in vista:

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

questo risolve il mio problema abbastanza bene e funziona in quasi tutti i browser. IE non è un problema, questa volta Chrome (WebKit in generale, a quanto pare) mi dà problemi. Quando si scorre verso il basso, la modifica funziona correttamente. Quando si scorre su e giù un po ', lo sfondo inizia a mostrare glitch grafici. Quando il piè di pagina ritorna in fondo, sembra di nuovo normale.

Qualcuno può aiutarmi?

Answer 1

Ho avuto un problema simile su un sito web. Ma ho trovato la soluzione.

Prova a utilizzare -webkit-transform proprietà css.

See codice qui sotto

#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. Mi scusi per il mio inglese.