animation - propiedad - Safari cambia los pesos de las fuentes cuando se ejecutan animaciones no relacionadas
keyframes css3 ejemplos (3)
Aparentemente, ese es el precio que pagas por la aceleración de hardware: todo el texto se convierte momentáneamente en imágenes, lo que provoca una caída en la calidad del renderizado.
Sin embargo, la aplicación de html {-webkit-font-smoothing: antialiased} para desactivar el antialiasing subpíxel hace que este problema desaparezca. Eso es lo que estoy haciendo por ahora.
ACTUALIZACIÓN: Desde entonces, también aprendí que esto sucede solo cuando el navegador no puede estar seguro de si la sección que se está animando va a afectar el texto. Esto generalmente se puede manejar teniendo el texto arriba (mayor z-index que) los elementos que se están animando, y / o asegurándose de que el texto tenga un fondo completamente opaco.
Estoy usando animaciones CSS en mi página y Safari parece cambiar el peso de fuentes no relacionadas en otro lugar de la página cuando se ejecutan las animaciones. ¿Alguna idea de por qué sucede esto? Todos los demás navegadores funcionan bien, incluyen los de webkit como Chrome.
He detallado el error en un video aquí - http://www.screenr.com/gZN8
El sitio también está aquí - http://airport-r7.appspot.com/ pero puede seguir cambiando rápidamente.
Estoy usando una brújula (@ transition-property, @ transition-duration) en los iconos de flecha. No se aplicaron transiciones en el encabezado que está parpadeando. En una Mac, podría ser la aceleración del hardware, pero todavía estoy tratando de resolverlo.
Cuando activa la composición de la GPU (por ejemplo, a través de la animación CSS), el navegador envía ese elemento a la GPU, pero también cualquier elemento que aparezca encima de ese elemento si se modifican sus propiedades superiores / izquierdas. Esto incluye cualquier posición: elementos relativos que aparecen después de la animación.
La solución es dar la posición del elemento animador: relativa y un índice Z que lo coloca por encima de todo lo demás. De esta manera obtienes tu animación, pero mantienes la representación de la fuente subpíxel (IMO superior) en elementos no relacionados.
Aquí hay una demostración del problema y la solución http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
Actualización: las versiones más recientes de Chrome conservan el antialiasing subpíxel en elementos compilados de GPU siempre que el elemento no tenga transparencia, por ejemplo, tenga un fondo sin píxeles transparentes o semitransparentes. Tenga en cuenta que cosas como border-radius introducen píxeles semitransparentes.
Me he enfrentado a este problema en numerosas ocasiones y he tenido éxito agregando el siguiente CSS al elemento animado:
z-index: 60000;
position: relative;
Parece que necesita tanto el índice z como la posición para ser efectivo. En mi caso, lo estaba usando con rotuladores animados de Font Awesome.