Cambiar el archivo adjunto de fondo durante el desplazamiento causa fallas gráficas en WebKit

Question

Tengo el siguiente problema.

I construido un sitio web con esta estructura:

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

contenido tiene un conjunto Imagen de fondo para permanecer fija en la parte inferior. Ahora, cuando te desplazas hacia abajo, la imagen se desplaza detrás del pie de página. Para evitar eso, escribí un guión corto para establecer automáticamente el archivo adjunto para desplazarse cuando el pie está a la 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; 
    } 
}); 

esto resuelve mi problema bastante bien y funciona en casi todos los navegadores. IE no es problema, esta vez Chrome (WebKit en general, parece) me da problemas. Cuando se desplaza hacia abajo, el cambio funciona correctamente. Cuando se desplaza hacia arriba y hacia abajo un poco, el fondo comienza a mostrar fallas gráficas. Cuando el pie de página vuelve a la parte inferior, parece normal otra vez.

¿Alguien me puede ayudar?

Answer 1

Tuve un problema similar en un sitio web. Pero encontré la solución.

Intente utilizar -webkit-transform propiedad de css.

Ver código de abajo

#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. Lo siento por mi ingles.