So beheben Sie Flimmern bei der Verwendung von Webkit Transformationen und Übergängen in iOS 6

Question

Wir haben eine HTML5-App für das iPad entwickelt, die Webkit-Transformationen und Übergänge für Animationen verwendet. In der Vergangenheit mussten wir -webkit-transform: translate3d(0,0,0); verwenden, um die Hardwarebeschleunigung zu aktivieren, um zu verhindern, dass Animationen flimmern und glatt erscheinen. Wir haben auf iOS 6 aktualisiert und diese Technik scheint nicht mehr zu funktionieren. Gibt es eine neue Möglichkeit, Hardwarebeschleunigung in iOS 6 für Animationen aufzurufen?

Answer 1

Try this:

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

Answer 2

Apple hat Safari geändert in iOS6, so dass using translate3d doesn't automatically trigger GPU acceleration. Ich denke, dass die Leute gerade mit verschiedenen Ansätzen spielen, um herauszufinden, wie man das schaffen kann.

Answer 3

Ich beendete das, indem ich translate3d (0, 0, 0) auf jedes Element innerhalb dessen anwendete, was ich umwandelte.

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