css - Using backface-visibility on * elements -

i doing work on website fixed sidenav scrolls page.

now noticed there problems position: fixed elements in webkit rendering engine (see this) , solve - seen in post, used -webkit-backface-visibility: hidden;.

what post describes webkit when using fixed elements tries check damaged regions see if within same composite layer , unifies them 1 paint rectangle while scrolling.

now i'm not having bugs or issues either components wondering if, box-sizing: border-box; add following css:

* {     backface-visibility: hidden; } 

prefixes stripped

• would have big performance hits on webpage?
• would fix bugs? (webkit pretty weird stuff sometimes)
• what other advantages / disadvantages potentially have?

thanks in advance, if question vague i'll hear guys in notime ;)

performance hits aren't registered common user, if you're chasing indexing score, that's ping that's hurting you.

for listed scenario, if you're using precompiler less or sass, i'd recommend putting fixed rules in mixin or inheritance, in sass:

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

that way, you're avoiding (admittedly miniscule) hit of catch-all splat css selector, , can judiciously , apply rule elements need it.

even if you're writing css longhand, applying rule care prevent unintended consequences may arise future 3d css animations or other fancy fluff gets attached site. better use scalpel scimitar, here.