Cambio de fondo en Google Chrome cuando la opacidad cambia al desplazarse

Tengo un efecto de desplazamiento con Jquery que cambia la opacidad del elemento desplazado. Funciona bien en todos los navegadores recientes, excepto en Chrome, donde cambia el fondo de los elementos del cuerpo.

Aquí está el enlace: http://wrong.ro/tataia/

Mi entorno de trabajo es el siguiente: Google Chrome v18.0.1025.162 / Windows 7 x64.

¿Hay alguna solución para esto? ¡Gracias por adelantado!

Experimenté algo muy cercano a esto, en mi caso, cambiar la opacidad al mover el mouse provocó que un elemento de imagen en primer plano se moviera. Parece que la causa particular está relacionada con el uso de la transformación (que estaba usando). La solución fue simple: en el elemento img en cuestión, agregué:

-webkit-backface-visibility: hidden; 

No más meneo. No estoy familiarizado con lo que realmente hace esto, pero no tuvo ningún efecto secundario extraño y solucionó el problema.

También vi una solución alternativa que no probé; al parecer, otras personas han experimentado esto y lo han arreglado con la rotación:

 -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); 

Finalmente puedo ver el problema en Chrome. Es muy sutil, por lo que, a menos que uno sepa exactamente lo que está buscando, es fácil perderse.

Todavía estoy trabajando en el rest de los problemas, pero cuando me coloco sobre el logo de “stiati ca” en la mitad inferior, pude ver el cambio de fondo un poco a la izquierda de la imagen.

El problema parece estar relacionado con la parte del background-size de tu CSS aquí. Si elimino las líneas de background-size fondo, el problema desaparece por completo. No estoy sugiriendo que esa sea la causa real del problema, pero esa es la primera pista. Mi conjetura en este punto de la investigación (más adelante en la respuesta) es que algo en el desplazamiento está causando que el tamaño del documento cambie, lo que hace que el fondo se vuelva a escalar y, por lo tanto, cambie:

 body { background: black url('../img/bck.jpg') left top fixed no-repeat; moz-background-size: cover; background-size: cover; -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale')"; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale'); } 

Continuando con esto, encuentro que si comento la línea de sangría de texto de este bloque de CSS:

 a#stiati_ca{ display: block; width: 124px; height: 124px; xtext-indent: -9999em; background: url('../img/stiati_ca.png') no-repeat; margin: 88px auto 0; } 

Entonces, el problema desaparece por completo al pasar el cursor sobre el logotipo. Por supuesto, hay un texto en su enlace que muestra que supongo que no deseaba que estuviera visible, pero puede corregir el HTML para que funcione de manera diferente. Yo sugeriría usar un enlace con un div de tamaño fijo (sin texto en el enlace) y luego establecer la imagen de fondo en el div y no en el enlace en sí. De todos modos, esta es una forma más segura de que los navegadores cruzados puedan hacer las cosas y no necesitará la línea de sangría de texto y el problema de cambio de fondo debería desaparecer para la imagen del logotipo. Si realmente necesita el texto en el enlace pero no quiere que se muestre, colóquelo en un espacio y haga que el espacio sea invisible con la display: none . De cualquier manera, no debe establecer la imagen de fondo en , sino en un elemento con el tamaño adecuado dentro del enlace. Esto debería funcionar mejor.

Todavía no he descubierto por qué ocurre el mismo problema en las cuatro imágenes principales. Añadiré a mi post si me imagino que uno.