Cómo reparar el parpadeo al usar las transformaciones y transiciones de Webkit en iOS 6

Question

Hemos creado una aplicación HTML5 para el iPad que usa transformaciones y transiciones de Webkit para animaciones. En el pasado, hemos tenido que usar -webkit-transform: translate3d(0,0,0); para habilitar la aceleración de hardware para evitar que las animaciones parpadeen y aparezcan sin problemas. Hemos actualizado a iOS 6 y esta técnica ya no parece funcionar. ¿Hay alguna forma nueva de invocar el acceso de hardware en iOS 6 para las animaciones?

Answer 1

Prueba esto:

-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden; 

Answer 2

Apple ha cambiado Safari en iOS 6, de manera que using translate3d doesn't automatically trigger GPU acceleration. Creo que la gente está jugando con diferentes enfoques en este momento para descubrir cómo hacer que esto suceda.

Answer 3

Terminé arreglando esto aplicando translate3d (0, 0, 0) a cada elemento dentro de lo que estaba transformando.

.content * { -webkit-transform:translate3d(0,0,0); }