title: The underlying magic of -webkit-backface-visibility
body: <p>I'd like to know why <code>webkit-backface-visibility</code> is like that all-purpose aspirin that solves or makes worse all kinds of heterogeneous problems, mostly related to artifacts and flickering.</p>
  
  <p>I have read and understand what really <code>backface-visibility</code> is for: It controls wether 3D rotated objects are visible when not facing the screen. There's a nice, straighforward demo <a href="http://css-tricks.com/almanac/properties/b/backface-visibility/" rel="noreferrer" title="here">here</a></p>
  
  <p>But I'm curious why, everytime I have strange glitches in the CSS world, <strong>totally unrelated to 3D rotations and their hidden backfaces</strong>, applying <code>backface-visibility</code> to the problematic layer or one of its ancestors usually helps or make things worse, but rarely does nothing. I'm talking about things like</p>
  
  <ul>
  <li>Animations flickering</li>
  <li>Fixed layers Z-Index problems</li>
  <li>Display:none &lt;> visible flicker and artifacts</li>
  <li>Scrolling flicker</li>
  </ul>
  
  <p>Interestingly and always in my humble experience, <code>backface-visibility:hidden</code> tends to solve fixed-positioning related stuff, and <code>backface-visibility:visible</code> is "best" for flickering. Also interestingly, in Chrome and Safari the side-effects are different, but boy there are!</p>
  
  <p>I am working in a Visual HTML creator, so the situations were I have flicker / artifacts are rather complex (ie. an animation over several layers, a scrolling div behind fixed elements, absolute over fixed with z-index ....)</p>
  
  <p>Anybody can enlighten me?</p>