La transformación CSS causa parpadeo en Safari, pero solo cuando el navegador tiene> = 2000px de ancho
, has leído bien. Probado en varias máquinas en la oficina y la única diferencia entre los escenarios era el tamaño del navegador. Un compañero de trabajo lo redujo a un punto óptimo de 2000px. Lo-and-behold cuando cada uno redimensionamos nuestros navegadores para que tengan > = 2000px de ancho y pasamos el ratón sobre un elemento con una animación de transformación, varios elementos de la página, específicamente cualquier elemento con un fondo de gradiente CSS, parpadearán. A la inversa, si cambia el tamaño del navegador para que sea
¿Alguien más ha visto este extraño comportamiento? ¿Por qué es 2000px un número mágico, y qué sucede exactamente en 2000px?
NOTA - Realmente no puedo compartir capturas de pantalla/video/enlaces ya que este sitio aún no es público, y el código es relativamente innecesario, ya que esto parece ser más un problema de navegador que nada.
NOTA 2 - Mi pregunta aquí es realmente acerca de lo que sucede exactamente en Safari en 2000px, no necesariamente cómo arreglar el parpadeo con backface-visibility o translateZ o similares. La razón es que usamos -webkit-font-smoothing: subpixel-antialiased; liberalmente en todo el sitio y el uso de cualquiera de estos trucos supera esa propiedad para toda la página, activando el antialiasing / escala de grises para todo el texto.
EDIT - Bien, lo siento por no haber hecho esto antes. Aquí hay un poco de código en un jsFiddle que debería reproducir el problema: http://jsfiddle.net/brandondurham/ujPMK/embedded/result /
Recuerde, Safari debe estar configurado en al menos 2000px de ancho para que esto suceder.
6 answers
Frustrante ¿eh?
Vea EDIT4 para la respuesta a por qué 2000px es un número mágico.
Hay un par de cosas que puedes probar.
Añadir
-webkit-transform-style: preserve-3d;a los elementos que son parpadeo.Añadir
-webkit-backface-visibility: hidden;a los elementos que son
parpadeo.Mover el elemento de animación fuera del padre el parpadeo
los elementos están dentro.
EDITAR - Wesley Hales, said aquí "Me encontré con un comportamiento defectuoso al aplicar la aceleración de hardware a partes de la página que ya estaban aceleradas"
Es difícil ayudarte a depurar esto sin ningún código. Pero para empezar te sugiero que enciendas el modo de depuración en safari. Write ' defaults write com.manzana.Safari IncludeInternalDebugMenu-bool true ' en la terminal.
Después de esto aparecerá un menú de depuración. Elija Dibujo / Banderas de composición > Mostrar bordes de composición.
Esto te ayudará vea qué se está procesando y elija qué poner en la aceleración de hardware y qué dejar fuera.
EDIT2 - Esto también vale la pena echarle un vistazo: fast-animation-with-ios-webkit
Su con respecto a iOS, pero he experimentado que - en algunas circunstancias - las soluciones que funcionan en iOS también funciona en osx.
EDIT3 - Si solo estás preguntando qué sucede cuando es más grande que 2000px puedo decirte con seguridad que en iPhones, WebKit crea texturas que no son más grandes que 1024 por 1024, y si su elemento es más grande que eso, tiene que crear múltiples texturas.
Documentación sobre las limitaciones de textura
Ahora, cuando lo hacen en iPhone, no me sorprendería si hacen lo mismo en OsX, pero tiene un límite más alto.
No sé si este es tu caso tho. Imposible de decir sin ningún código.
EDIT4 - "La implementación en TextureMapperTiledBackingStore es bastante simple, y solo se usa para evitar la limitación de tamaño de textura de 2000x2000 en OpenGL."
Por lo tanto, si su elemento es más grande que 2000x2000 tiene que crear múltiples texturas.
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
2015-03-05 15:44:19
Encontré que aplicando el -webkit-backface-visibility: hidden; al elemento de traducción y -webkit-transform: translate3d(0, 0, 0); a todos sus hijos, el parpadeo desaparece.
Por favor refiérase a Prevent flicker on webkit-transition of webkit-transform.
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
2017-05-23 12:10:48
Si las fuentes están parpadeando, use el siguiente CSS:
html,body {
-webkit-font-smoothing: antialiased;
}
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
2017-09-15 10:28:40
Me di cuenta de que después de aplicar CSS3 transforma elementos en Chrome se ve un poco "crujiente" y el texto sin alinear. Las soluciones en la respuesta de Mathias no tienen ningún efecto en esto. Pero aquí hay algo extraño: después de aplicar los filtros de webkit (es decir, -webkit-filter: opacity(0.99999);), los elementos renderizados correctamente y las letras en el texto se alinean. Pero después de eso, esos elementos se ven un poco azulados. Tal vez esto tenga efecto en su parpadeo.
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-04-05 02:00:08
En primer lugar, gracias a las grandes soluciones que aquí se ofrecen. Siempre pensé que en el pasado debía haber algo mal con mi código. También razoné el borde de 2000px para que las animaciones ya no funcionaran sin problemas. Gracias a ustedes ahora añadir
/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
.boxContent {
-webkit-backface-visibility: hidden;
}
}
Hice esto condicionalmente porque, de hecho, las imágenes no se muestran antialiadas después de agregar la clase. En otro lugar lo hice
/*keep animation smooth in Safari above 2000px*/
.twothousand {
-webkit-backface-visibility: hidden;
}
Y agregó y eliminó la clase adicional a través de jQuery. Así que las transiciones son suaves y se renderizan después de terminar (eliminando la clase de nuevo) Un poco complicado, pero funcionó bien para mí y finalmente hace animaciones en Safari por encima de 2000px suave. ¡Buen trabajo, chicos!!
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-02-07 11:28:41
Una solución fácil que resolvió todos mis problemas fue esta:
.app * {
transform-style: preserve-3d;
}
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
2017-06-26 22:50:13