iOS6 UIwebView CSS3D transforms are not HW accelerated

Question

I have problems with poor scrolling performance in iOS6 UIWebView component..In iOS5 scrolling was really fluid, though. So I have searched the web little bit and found this (part of iOS6 beta changelog).

WebKit no longer always creates hardware-accelerated layers for elements with the -webkit-transform: preserve-3d option. Authors should stop using this option as a way to get hardware acceleration.

That could be the reason, since the html site my app displays uses lots of css3 transformations.. Please have anyone a solution or advice how to force webview switch back to accelerated rendering model?

Answer 1

Besides the already mentioned change of the CSS-properties that are(or are not) triggering hardware acceleration I have noticed another change on iOS6 that did not persist as heavily on iOS5 (or at least I did not really notice it before): Overlapping between hardware-accelerated elements and non-accelerated elements will slow down rendering and the app A LOT.

If you have any overlappings between accelerated and non-accelerated elements, make sure that you add hardware-acceleration to those other elements even if they are not animated or so, because they will be re-rendered as well which will completely supress or in some cases revert the acceleration-effect.

I have also written an short article about this if you want to check it out: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Answer 2

UIWebView still does hardware acceleration if you use a 3D transform (e.g. -webkit-transform: translateZ(0)). It just no longer does if you only use -webkit-transform-style: preserve-3d.

If you have an example that is doing 3D transforms, but got slower with iOS 6, you should report it at Apple's Bug Reporter.