Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS backface-visibility: hidden;

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #255146
    gentlemedia
    Participant

    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!

    #255147
    Beverleyh
    Participant

    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

    #255148
    gentlemedia
    Participant

    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 :)

    #255149
    Beverleyh
    Participant

    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/

    #255166
    gentlemedia
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.