parpadeo - parpadear div css

La Transformación CSS causa parpadeo en Safari, pero solo cuando el navegador es>=2000 px de ancho

Question

Lo leíste bien. Probado en varias máquinas en la oficina y la única diferencia entre los escenarios fue el tamaño del navegador. Un compañero de trabajo lo redujo a un punto óptimo de 2000px. Mire y baje cuando cada uno cambie el tamaño de nuestros navegadores para que sean> = 2000 píxeles de ancho y pase el mouse sobre un elemento con una animación de transformación, varios elementos de la página, específicamente cualquier elemento con un fondo de degradado CSS, parpadearán. Inversamente, si cambia el tamaño del navegador para que sea <2000 px de ancho y pase el mouse sobre ese mismo elemento, no se produce ningún parpadeo.

¿Alguien más ha visto este extraño comportamiento? ¿Por qué 2000px es un número mágico, y qué ocurre 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 parece ser más un problema de navegador que cualquier otra cosa.

NOTA 2 - Mi pregunta aquí está realmente en torno a qué sucede exactamente en Safari at 2000px, no necesariamente cómo arreglar el parpadeo con backface-visibility hacia atrás o translateZ o similar. La razón es que usamos -webkit-font-smoothing: subpixel-antialiased; generosamente en todo el sitio y el uso de cualquiera de estos trucos supera esa propiedad para toda la página, activando antialiasing / escala de grises para todo el texto.

EDITAR - De acuerdo, disculpa por no haber hecho esto antes. Aquí hay un poco de código en jsFiddle que debería reproducir el problema: http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

Recuerde, Safari tiene que tener al menos 2000 píxeles de ancho para que esto suceda.

Answer 1

Frustrante ¿eh?

Vea EDIT4 para la respuesta de por qué 2000px es un número mágico.

Hay un par de cosas que puedes probar.

• Agregar -webkit-transform-style: preserve-3d; a los elementos que están parpadeando.

• agregar -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, dijo aquí: "Encontré un comportamiento impreciso al aplicar 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, sugiero que active el modo de depuración en safari. Escribe ''default write com.apple.Safari IncludeInternalDebugMenu -bool true'' en el terminal.

Después de esto aparecerá un menú de depuración. Elija indicadores de Dibujo / Composición> Mostrar bordes de Composición.

Esto te ayudará a ver lo que se está renderizando y, con eso, elegir qué poner en aceleración de hardware y qué omitir.

EDIT2 - Esto también vale la pena echarle un vistazo: fast-animation-with-ios-webkit

Es sobre iOs, pero he experimentado que, en algunas circunstancias, las soluciones que funcionan en iOs también funcionan en osx.

EDIT3 - Si solo preguntas 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 tu elemento es más grande que eso, tiene que crear múltiples texturas.

Documentación sobre limitaciones de texturas

Ahora, cuando lo hagan en iPhone, no me sorprendería si hacen lo mismo en OsX, pero tiene un límite superior.

No sé si este es tu caso si. Imposible decir sin ningún código.

EDIT4 - "La implementación en TextureMapperTiledBackingStore es bastante simple, y se usa solo para evitar la limitación del tamaño de la textura de 2000x2000 en OpenGL".

Entonces, si su elemento es más grande que 2000x2000, tiene que crear múltiples texturas.

http://trac.webkit.org/wiki/CoordinatedGraphicsSystem

Answer 2

Noté que después de aplicar CSS3, los elementos de transformación en Chrome se ven un poco "crujientes" y el texto no está alineado. Las soluciones en la respuesta de Mathias no tienen ningún efecto sobre esto. Pero aquí hay algo extraño: después de aplicar los filtros webkit (es decir, -webkit-filter: opacity(0.99999); ), los elementos procesados ​​correctamente y las letras en el texto se alinean. Pero después de eso esos elementos se ven borrosos un poco. Tal vez esto tenga un efecto en tu parpadeo.

Answer 3

En primer lugar, gracias a las excelentes soluciones que se ofrecen aquí. Siempre pensé que en el pasado debe haber algo mal con mi código. No fue así. También razoné sobre el borde 2000px para que las animaciones no se ejecuten sin problemas por más tiempo. Gracias a ustedes ahora agrego

/*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 procesan antialias 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. Entonces las transiciones son suaves y se renderizan después de terminarse (eliminando la clase de nuevo) Un poco complicado pero funcionó bien para mí y finalmente hace que las animaciones en Safari sean más suaves que 2000px. ¡¡Buen trabajo chicos!!

Answer 4

Encontré que aplicando -webkit-backface-visibility: hidden; al elemento de traducción y -webkit-transform: translate3d(0, 0, 0); para todos sus hijos, el parpadeo luego desaparece.

Consulte Prevenir parpadeo en webkit-transition de webkit-transform .

Answer 5

Una solución fácil que resolvió todos mis problemas fue esta:

.app * {
  transform-style: preserve-3d;
}

Answer 6

Si las fuentes parpadean, use el siguiente CSS:

html,body {
    -webkit-font-smoothing: antialiased;    
}