Using backface-visibility on * elements

Question

I was doing some work on a website with a fixed sidenav that scrolls with the page.

Now I noticed that there are some problems with position: fixed elements in the webkit rendering engine (see this) and to solve those - as seen in the post, I used -webkit-backface-visibility: hidden;.

What the post describes for webkit when using fixed elements is that it tries to check damaged regions to see if they are within the same composite layer and unifies them as 1 paint rectangle while scrolling.

Now I'm not having any bugs or issues with either components but I was wondering what if, like box-sizing: border-box; I were to add the following to my CSS:

* {
    backface-visibility: hidden;
}

prefixes stripped

• Would this have any big performance hits on my webpage?
• Would this fix bugs? (webkit does some pretty weird stuff sometimes)
• What other advantages / disadvantages could this potentially have?

Thanks in advance, If my question is too vague I'll hear it from you guys in notime ;)

Answer 1

Performance hits like this aren't likely to be registered by the common user, but if you're chasing an indexing score, that's likely to ping as something that's hurting you.

For your listed scenario, if you're using a precompiler like LESS or SASS, I'd recommend just putting your fixed rules in a mixin or inheritance, something like this in SASS:

.fixed {
  position: fixed;
  -webkit-backface-visibility: hidden;
}
.my-totally-bitchin-header {
  @extend .fixed
  /* Does other cool stuff too */
}

That way, you're avoiding the (admittedly miniscule) hit of the catch-all splat CSS selector, and you can judiciously and easily apply the rule to the elements that need it.

Even if you're writing CSS longhand, applying that rule with care will prevent any unintended consequences that may arise from future 3D CSS animations or other fancy fluff that gets attached to your site. Better to use a scalpel than a scimitar, here.