CSS GPU acceleration on the iPad

Last week, my colleague Dave and I gave a presentation on how we got Popcorn Maker working on the iPad. We hadn’t told anybody of our plans so I was pleasantly surprised when it was met with such a positive reaction. As a result of our efforts we’ve been allowed to continue developing for the iPad! Since it’s only Dave and me working on it we’ve been given (almost) free rein to do whatever we want. I can’t wait to start experimenting with some of the ideas I have.

One of the issues we struggled with was getting Popcorn Maker to run smoothly. Initially it ran poorly even on our iPad 2, something we thought was a limitation of the iPad’s hardware. It turns out that the poor performance was due to software rendering of the CSS. A desktop’s processor is powerful enough for smooth animations, but even the iPad 2’s dual core can’t compare. CSS3 has support for GPU acceleration, but only when working in 3D space. 2D animations are not accelerated by the GPU. Our fix was to force the browser into thinking it’s rendering in 3D by giving it a z position of 0. The magic piece of code:


Now we’re getting fantastic performance even on the iPad 1! Having the GPU enabled while using the browser will put a strain on the battery so we’ll have to do some battery tests to see if we still get reasonable battery life. I’ll also look into seeing if there’s a way to selectively turn GPU acceleration on and off.


One Reply to “CSS GPU acceleration on the iPad”

Leave a Reply

Your email address will not be published. Required fields are marked *