CSS3 performance on mobile devices
If like me you have to deal with performance on mobile device on a website using CSS3 transitions / transformation, it can be a good idea to keep in mind those tips :
- Use
transform:translateZ(0);to trigger hardware acceleration. If you use a custom web font, think about applying this also on it. Otherwise the font may start flickering on any transition on your page. It's due to a better rendering of the font when GPU rendering is on. - Use
transform-style: preserve-3d;. It tell the browser to not act like the inside of the element you applied the transform are flat but also need to be manipulated in a 3D context. It will boost your perf. - Use
backface-visibility: hidden;. Every element which are placed in a 3D context are, by default, render as 3D element. Thats mean having a backface. If you don't plan to animate elements in a way that display their backface, you should want to don't load their in your browser memory.
Written by Thibault Milan
Related protips
2 Responses
These are decent tips, but each generally just triggers GPU rendering, in most cases unless you have a specific reason to use the transform only one of those rules will suffice.
This simplifies the actual problem though. Blanketing GPU 'hacks' is rarely the best solution where mobile is concerned and you should really think a lot harder about where and when you want to ask the GPU to do some work. Even when blanketing these rules over your elements you can find that GPU rendering is turned on and off which will result in flicker.
Until you really get a good idea on how animating rules work with your content it is really a case of experimenting with how to run your transforms.
Decent enough tips but better would be to make sure that devs understand exactly how these rules affect the browser and the rendering.
I agree with Matt, you should not be using translateZ as your go to performance solutions, theres a lot more to it i would say. Reference http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ and talk about the stuff that animates cheaply: translate, opacity and scale. It's important to remember that those properties create the highest performance, not actually hacking in a translateZ to get GPU support. That's a faulty solution in general because it has to send it to the GPU, which causes a slight delay and causes the device to run hotter.
I read up on this article and it's really interesting about performance and animations and i would recommend looking into it to get a better grasp of what is going on under the hood. http://css-tricks.com/myth-busting-css-animations-vs-javascript/
Besides that good basic tips, the backface might also be handy to note that it causes a flicker when animating, a white flicker. It's a good tip to remember that when translating cause it can cause a headache to figure out where the white flashes are coming from if youre animating an object without the backface being hdiden (when making a cardflip for example)
Thanks for the tips, ill have a look if it increases performance. Otherwise i might step away from CSS3 and actually use the GSAP library to create better performance animations.
