How to fix flicker when using Webkit transforms & transitions in iOS 6

Question

We've built an HTML5 app for the ipad that uses Webkit transforms and transitions for animations. In the past we have had to use -webkit-transform: translate3d(0,0,0); to enable hardware acceleration to prevent animations from flickering and to appear smooth. We have updated to iOS 6 and this technique no longer seems to work. Is there a new way to invoke hardware accelation in iOS 6 for animations?

Answer 1

Try this:

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