El desplazamiento del enlace provoca el tamaño de fondo: cubierta; para cambiar en Chrome

Question

Utilizando CSS3, configuré una imagen de fondo como portada. Después de cargar la página en Chrome y pasar el mouse por encima de un enlace, el fondo alrededor del texto se desplaza ligeramente (pero bastante notablemente). Estoy usando una transición para el vuelo estacionario, pero el cambio de fondo también ocurre con la transición eliminada.

Supongo que el fondo cambia de tamaño durante el vuelo estacionario, pero no estoy seguro de cómo evitar que esto suceda. Una vez que ha cambiado, puede transferir otros enlaces sin ningún problema. Después de actualizar la página, el problema persiste.

sitio web está aquí: http://tylerbritt.com/

El estilo es como tal:

body{ 
    text-align: center; 
    margin: 0 auto; 
    color: white; 
    font: bold 80pt 'Economica', sans-serif; 

    background: url(bg2.jpg) no-repeat center center scroll; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

a { 
    color: white; 
    text-decoration: none; 
    -webkit-transition: text-shadow 0.3s ease-out; 
    -moz-transition: text-shadow 0.3s ease-out; 
    -o-transition: text-shadow 0.3s ease-out; 
    -ms-transition: text-shadow 0.3s ease-out; 
    transition: text-shadow 0.3s ease-out; 
} 

    a:hover { 
     text-shadow: 0 0 6px #1c00f6; 
    } 

Mis problemas es muy similar a: Background shift in Google Chrome when opacity changes on hover; El consejo de jfriend00 fue útil, pero mi problema difiere porque es puramente un enlace de texto y no un img.

Estoy en la versión de Chrome 19.0.1084.52. El problema no existe es Safari. Cualquier consejo sería muy apreciado.

Answer 1

podría ser un error, no sé si esto va a funcionar, pero tratar background-attachment: fixed;

Answer 2

Hey he notado el mismo problema exacto. Definitivamente una cosa de cromo. A continuación se muestra un issue presenté al proyecto de cromo:

Chrome Version  : 21.0.1180.89 
OS Version: 6.1 (Windows 7, Windows Server 2008 R2) 
URLs (if applicable): http://jsfiddle.net/9vvy6/62/ 
         http://castlelaw-kc.fosterwebmarketing.com/ 
Other browsers tested: 
Add OK or FAIL after other browsers where you have tested this issue: 
    Safari 5/6:OK 
    Firefox 14.0.1:OK 
    IE 9:OK 
    Chrome:FAIL 

¿Qué pasos se reproduzca el problema?

1. Imagen de fondo con fondo de tamaño: cubrir
2. elemento (probado con div y etiquetas) que tiene un efecto hover
3. Para obtener los mejores resultados, utilice en un gran puerto de vista, en el que el bg La superposición la imagen se estira mucho, y las abducciones son más evidentes

¿Cuál es el resultado esperado?

Cuando se utiliza una activación de un efecto de vuelo estacionario (como el subrayado, el cambio de márgenes, etc.) la imagen de fondo debe permanecer constante (y lo hace en todos los otros navegadores probados hasta ahora)

Lo que ocurre en su lugar?

Cuando se activa el efecto de desplazamiento con el mouse, la imagen de fondo se deforma de manera extraña. En el área alrededor del elemento, la imagen bg carece de algunos píxeles.

Por favor, brinde cualquier información adicional a continuación. Adjunte una captura de pantalla si es posible .

En el JSFiddle vinculado anteriormente, que usa un ul/li como ejemplo. determinamos que el cambio de la pantalla de la ul al bloque en línea corrigió el problema.

IMPORTANTE: Es muy sutil, por lo que puede que tenga que barrer el ratón a través de los elementos pertinentes un par de veces antes de que note

UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, como Gecko) Chrome/21.0.1180.89 Safari/537.1