backface-visibility: hidden;

[gentlemedia]

I notice more and more on projects I’m working on which uses a lot of CSS transitions & animations (mostly on transforms) that other elements on the page flckr during these transitions & animations in Blink (Chrome & Opera).

I know that setting on those flickering elements backface-visibility: hidden; stops the flickering, but with this project a lot of elements flickr, so I set it on the * like so:

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

But I was wondering if this is a good thing to do or not? Is it performance wise bad, or will it give implications for some/other properties that don’t need it?

Thnx!

[Beverleyh]

Hardware acceleration should be used sparingly – just on the elements that need it – otherwise, on complex web pages, the GPU can go into overdrive and chomp through memory like nobody’s business.

Desktops may handle it pretty well but spare a thought for wee mobile processors that might just keel over and die through all that extra exertion.

The topic has been covered in a few online blogs so try Googling phrases such as “memory issue with css hardware acceleration” or “why use css hardware acceleration sparingly” to read more about it.

Some places to start;
https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/
http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

As for your problem, this may help – from the 2nd link;

Start with the top level container for the animation and see which of the child elements have a null transform and figure out if they really need it.
…
the parent already has the proper layer compositing. From there, I just disabled all the null transform hacks that were applied to nested elements
…
After doing this … we get much better performance

[gentlemedia]

Thanks, Beverley!

So you’re saying that backface-visibility: hidden also triggers hardware acceleration like the null transform hack discussed in that second article?

Nonetheless , I will set backface-visibility: hidden only on the elements that need it :)

[Beverleyh]

Yes – they’re all cheeky little methods to trigger hardware acceleration.

I found this other good article while I was browsing just now. It explains more about the effects of animation on the GPU (in terms of performance) and offers some optimisation tips https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

[gentlemedia]

Great, Beverley! I will go through those links to study more about the impact of CSS animations on performance. I like to work with them, because they’re fairly easy to create with my designer brain :)

I’m also aware of GSAP, Anime.js, Kute.js and the likes which give to my eye smoother animations, but still have to make time to learn & to experiment with them.

[Author]

Posts