Safari cambiar el peso de las fuentes cuando se están ejecutando animaciones no relacionadas
Estoy usando animaciones CSS en mi página y Safari parece cambiar los pesos de fuente no relacionados en otros lugares de la página cuando las animaciones se están ejecutando. ¿Alguna idea de por qué sucede esto? Todos los demás navegadores funcionan bien, incluidos 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 podría seguir cambiando rápidamente.
Estoy usando compass (@transition-property, @transition-duration) en los iconos de flecha. No se aplican transiciones en el encabezado que está parpadeando. En un Mac-por lo que podría ser la aceleración de hardware, pero todavía estoy tratando de averiguarlo.
3 answers
Cuando se activa la composición de GPU (por ejemplo, a través de animación CSS), el navegador envía ese elemento a la GPU, pero también cualquier cosa que aparezca en la parte superior de ese elemento si se cambian sus propiedades superior/izquierda. Esto incluye cualquier posición: elementos relativos que aparecen después de la animación.
La solución es dar al elemento animador position:relative y un z-index que lo ponga por encima de todo lo demás. De esa manera usted obtiene su animación, pero mantener la (superior IMO) sub-pixel fuente renderizado 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 antialiasing sub-pixel en elementos compuestos por GPU siempre y cuando el elemento no tenga transparencia, por ejemplo, tiene un fondo sin píxeles transparentes o semitransparentes. Tenga en cuenta que cosas como border-radius introducen píxeles semitransparentes.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-13 08:52:54
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 causa la caída en la calidad de renderizado.
Sin embargo, aplicar html {-webkit-font-smoothing: antialiased} para desactivar el suavizado de subpíxeles hace que este problema desaparezca. Eso es lo que estoy haciendo por ahora.
ACTUALIZACIÓN: Desde entonces, también he aprendido 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 encima (mayor z-index que) de los elementos que se están animando, y/o asegurándose de que el texto tenga un fondo totalmente opaco.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-30 13:10:54
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 z-index y posición para ser eficaz. En mi caso yo estaba usando con fuente Impresionante hilanderos animados.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-29 10:32:08