Menu
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?
432
Fortunately, several options are available to fix that : -webkit-backface-visibility: hidden; This CSS rule is designed to fix the flicker effect on Chrome-based browsers, applied to the HTML flickering element. But use it wisely : this rule works, but is not the most efficient way to avoid flickering effect.
By adding <script>document. documentElement. className += 'js';</script> to the head, you basically get the benefits of hiding unstyled content before DOM ready, and also it doesn't mess up for those without Javascript. Save this answer.
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The -webkit-transition Boolean non-standardCSS media feature is a WebKit extension whose value is true if the browsing context supports CSS transitions. Apple has a description in Safari CSS Reference; this is now called transition there.
Try this:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Apple has changed safari in iOS6, so that using translate3d doesn't automatically trigger GPU acceleration. I think people are playing with different approaches right now to figure out how to make this happen.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
