CSS3 performance on mobile devices

Posted on

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.

Leave a Reply

Your email address will not be published.