Search code examples
htmlcsswebkitflicker

The underlying magic of -webkit-backface-visibility

I'd like to know why webkit-backface-visibility is like that all-purpose aspirin that solves or makes worse all kinds of heterogeneous problems, mostly related to artifacts and flickering.

I have read and understand what really backface-visibility is for: It controls wether 3D rotated objects are visible when not facing the screen. There's a nice, straighforward demo here

But I'm curious why, everytime I have strange glitches in the CSS world, totally unrelated to 3D rotations and their hidden backfaces, applying backface-visibility 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

  • Animations flickering
  • Fixed layers Z-Index problems
  • Display:none <> visible flicker and artifacts
  • Scrolling flicker

Interestingly and always in my humble experience, backface-visibility:hidden tends to solve fixed-positioning related stuff, and backface-visibility:visible is "best" for flickering. Also interestingly, in Chrome and Safari the side-effects are different, but boy there are!

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

Anybody can enlighten me?

Solution

  • I am not sure what kind of magic you are talking about, but there are certain cases where the CSS backface-visibility property can help to promote a DOM element to a layer so that the browser can take advantage of GPU while rendering that element.

    NOTE: only the hidden value will promote to a layer, not visible.

    Also, there are cases where this property can fix jagged edges around elements – all thanks to GPU rendering.

    There are a few other CSS properties that do the same thing, like translateZ(0) or translate3d(0,0,0). These are all hacks, and will be replaced by the new CSS property will-change.

    If you are doing animations with CSS, the best option in terms of performance is to change only these 2 CSS properties: transform and opacity. But as browsers are constantly changing, this may also change in the future. The goal is to make every CSS property as smooth as possible (ideally at 60FPS) while animating. I know that the Chrome team is working very hard on this, but not sure about other vendors.