I’m developing an iPhone app using the PhoneGap library, which lets you write your app as if it were a website. That means any UI transitions or animations have to be written the way you would for any modern website targeting Webkit: CSS3 transitions (mobile javascript is too slow for frame by frame calculations).
Unfortunately, CSS transitions can be a little slow, a little choppy, even on iPhone 4 and the faster Android based phones. The problem is that, by default, webkit doesn’t involve the GPU unless you’re doing 3D transforms. With desktop horsepower, thats fine. On a mobile device, that GPU could really help.
So how do you force webkit to share the processing load with the GPU?
Apply this style to the element you’re animating:
-webkit-transform: translateZ(0);
Simple, but effective.
whoah that blog site will be superb i love looking at you. Maintain the excellent artwork! You feel, lots of people are searching for this info, you can help him or her enormously.
Pingback: UPDATE: Fix: CSS Animation slow or choppy in mobile browsers | Things I Learned While Programming
Hi, I am using 2D transforms. The webkit animation is slow in android when compare to ipad/iphone. Is it helpful to mention this fix to solve my issue?
I never tested it on android, but since they’re using the same rendering engine, I assume the same fix would work. Only one way to find out…
I’ve been working on a mobile webapp with some drag/slide animation features, and have changed many of my translateX transform animations to translate3d(#,0,0), as touch responsiveness under the former was choppy at best, and practically absent at worst. I can confirm that this fix works for Webkit-based browsers on iOS and Android (I’m testing on a Samsung Galaxy Nexus as well as several generation’s of the iPhone), but would advise that developers use it sparingly, as an abundance of hardware-accelerated effects on the page can really eat through a viewer’s battery, and hardware accelerated elements seem to render more slowly when the part of the page containing them is loaded/reloaded. Also, apparently the opacity property also triggers hardware rendering in many cases, so if you’re frequently manipulating the transform property via JavaScript, defining an opacity value of 1 may serve as a welcome alternative to a superfluous translate3d property included only to trigger the hardware rendering.
This is probably one of the simplest and groundbreaking things I have seen in a while. jQuery animations also have the ability to SUCK on the mobile platforms, but this little trick works wonders. With my small app I appled this to the body of the page and all elements that are animated now run smooth.