Come correggere lo sfarfallio quando si utilizzano le trasformazioni e le transizioni di Webkit in iOS 6

Question

Abbiamo creato un'app HTML5 per l'ipad che utilizza trasformazioni e transizioni Webkit per le animazioni. In passato abbiamo dovuto usare -webkit-transform: translate3d(0,0,0); per abilitare l'accelerazione hardware per impedire alle animazioni di sfarfallio e apparire fluide. Abbiamo aggiornato a iOS 6 e questa tecnica sembra non funzionare più. C'è un nuovo modo per invocare l'accelation hardware in iOS 6 per le animazioni?

Answer 1

Prova questo:

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

Answer 2

Apple ha cambiato safari in iOS6, in modo che using translate3d doesn't automatically trigger GPU acceleration. Penso che le persone stiano giocando con approcci diversi in questo momento per capire come farlo accadere.

Answer 3

Ho risolto questo problema applicando translate3d (0, 0, 0) a ogni elemento all'interno di ciò che stavo trasformando.

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