parpadeos de transición CSS con: visitado en Safari, Chrome y Firefox, pero no Opera

Question

(para navegadores compatibles con transiciones CSS, incluidas las últimas versiones de Firefox, Safari y Chrome. Extrañamente, este problema no aparece en Opera .)

¿Alguien más ha notado esto? Cuando coloca una transición de color en un enlace, a: visitó las transiciones al color a: link antes de mostrar el color a: hover. Compruébelo usted mismo:

http://jsfiddle.net/Mgzv9/2/

se puede evitar este parpadeo de color?

Answer 1

Nunca lo he visto mientras usaba el color. Pero sí ocurre cuando se utilizan imágenes en formato de bloques. Esto es muy poco del tiempo de carga, y puede evitarse usando todas las imágenes de transición en una imagen grande y usando la propiedad de posición de campo para controlar la imagen.

Answer 2

Me he estado dando vueltas con este problema por un tiempo.

El problema es que este problema es realmente difícil de reproducir.

OK, entonces, ¿qué sucede, a veces mientras carga/actualiza una página con transición de color en los enlaces, el color primero se pasa del color predeterminado del enlace del navegador al color CSS definido. En realidad, no me sucede cuando abro el HTML desde el disco, pero si lo pongo en un servidor (incluso en el servidor local), aparece este problema.

Para reproducir el problema, cree un archivo HTML, añadir una hoja de estilo y definir una transición para los enlaces, algo como esto:

a { 
    color: red; 
    -webkit-transition: color .5s linear; 
    -moz-transition: color .5s linear; 
    -o-transition: color .5s linear; 
    -ms-transition: color .5s linear; 
    transition: color .5s linear; 
} 

a:hover { 
    color: green; 
} 

... y luego se incluyen la hoja de estilos en el código HTML.

Coloque los archivos en un servidor e intente abrir la página en Chrome, intente actualizar el sitio, a veces primero debe ver una transición desde el color azul predeterminado, cuando se carguen las páginas.

Después de deconstruir algunos sitios, donde no parecía haber ningún problema con esto, se me ocurrió esta solución simple.

Si incluye algunos archivos de Javascript también, entonces simplemente coloque Javascript incluye DESPUÉS de incluye su CSS.

Incluso funciona si solo incluye un archivo JS vacío, después de la hoja de estilos.

Espero que esto ayude!