iOS6 CSS3 3D transforms are extremely slow

Question

EDIT: This question will, in two days when I'm allowed to do so, be given a bounty of 500 reputation. If it's answered in the meantime, the author of the first posted fix will be awarded the reputation as soon as possible.

It seems that iOS6 has broken the performance of CSS3 transforms, as compared to iOS5.1, very badly. If you can provide a fix which brings the performance of the following example on iOS6 back up to par with iOS5.1, without loss of generality, you can have a bunch of my hard-earned reputation. The example runs perfectly fine on iOS5.1 (on both iPhone 4 and 4S). The iOS Chrome app is a good place to run this test, since it embeds a UIWebView.

Right now, it seems like these elements ARE being hardware accelerated, but that there's a bug in Apple's low-level pipeline which kills performance. I've tried a number of workarounds for hardware acceleration, and it seems that anything which invokes the GPU on iOS5.1 causes a massive slowdown on iOS6.

The bug persists even if you modify the animate function as follows.

function animate(node) { node.style.webkitAnimation = 'sample 5s infinite'; node.style.webkitPerspective = 1000; node.style.webkitBackfaceVisibility = 'hidden'; }

Please help me fight the tyranny of iOS6 and release my now horribly broken application.

<!DOCTYPE html> <html> <head> <title>Animation Playground</title> <style> @-webkit-keyframes sample { 0% { -webkit-transform: translate3d(0px, 0px, 0px); } 10% { -webkit-transform: translate3d(0px, 0px, 0px); } 20% { -webkit-transform: translate3d(10px, 0px, 0px); } 40% { -webkit-transform: translate3d(10px, 10px, 0px); } 50% { -webkit-transform: translate3d(10px, 20px, 0px); } 80% { -webkit-transform: translate3d(20px, 20px, 0px); } 100% { -webkit-transform: translate3d(0px, 0px, 0px); } } </style> <script type="text/javascript"> function fib(node, a, b) { node.innerHTML = a; setTimeout(function() { fib(node, a + b, b); }, 0); } function animate(node) { node.style.webkitAnimation = 'sample 5s infinite'; } function createNode(row, column) { var node = document.createElement('div'); node.style.width = '7px'; node.style.height = '7px'; node.style.position = 'absolute'; node.style.top = 30 + (row * 9) + 'px'; node.style.left = (column * 9) + 'px'; node.style.background = 'green'; return node; } function run() { for (var row = 0; row < 20; ++row) { for (var column = 0; column < 20; ++column) { var node = createNode(row, column); document.body.appendChild(node); animate(node); } } var output = document.getElementById('output'); fib(output, 0, 1); } </script> </head> <body onload="run()"> <div id="output" style="font-size: 40px; position: absolute; left: 220px;"></div> </body> </html>

cssdeck.com/labs/full/bchlgewv/0 I don't see any difference between iOS 5.1 and 6. — mddw
– mddw, Commented Sep 25, 2012 at 8:23
Leave two devices on side by side and watch the counters; iOS 5.1 handily outstrips iOS 6. — eplawless
– eplawless, Commented Sep 25, 2012 at 17:55

thv20 · Accepted Answer · 2012-09-27 09:08:18Z

iOS 6 requires a different set of CSS rules to trigger hardware acceleration.

Try this instead:

-webkit-transform: translate(0,0) translateZ(0);

EDIT: I've actually found that translate3d() still works, provided the values change as part of the transition. So, this does NOT work:

.element.position {-webkit-transition: left 1s ease; -webkit-transform: translate3d(0,0,0)} .element.position-a {left: 0} .element.position-b {left:500px}

But this DOES work:

.element.position {-webkit-transition: all 1s ease} .element.position-a {-webkit-transform: translate3d(0,0,0)} .element.position-b {-webkit-transform: translate3d(500px,0,0)}

tipycalFlow · Accepted Answer · 2014-05-01 17:13:25Z

iOS6 no longer automatically GPU accelerates content when the translate3d magic invocation is uttered. Some supplicants have suggested that requestAnimationFrame will invoke the necessary intercessors and appease the mighty and unknowable demons of iOS - possibly subsequent to the sacrifice of a small goat (which must be without blemish). Others suggest adding an inline style for perspective and backface visibility.

Olaf Horstmann · Accepted Answer · 2012-10-04 07:28:56Z

NEVER mix left/top positioning with translate() or translate3d() - this will be horribly slow even on desktop computers it might cause a slowdown

Collectives™ on Stack Overflow

iOS6 CSS3 3D transforms are extremely slow

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related