Foundational Magic -webkit-backface-visibility

Question

I would like to know why webkit-backface-visibility is similar to this universal aspirin, which solves or worsens all heterogeneous problems, mainly related to artifacts and flicker.

I read and understood what really the backface-visibility intended for: it controls that 3D-rotated objects are visible when they are not facing the screen. There is a good demo here

But I'm curious why every time I get strange glitches in the CSS world, they are completely unrelated to 3D rotations and their hidden images , applying backface-visibility to a problem layer or to one of its ancestors usually helps make things worse, but rarely doing nothing. I'm talking about things like

• Animation flickering
• Fixed problems with Z-level indicators.
• Display: no <> visible flicker and artifacts
• Flicker scroll

Interesting and always in my humble experience, backface-visibility:hidden tends to solve problems with fixed positioning, and backface-visibility:visible is the “best” for flickering. It’s also interesting that the side effects are different in Chrome and Safari, but there is a boy!

I am working on a creator of Visual HTML, so the situations were flickering / artifacts were rather complicated (i.e. animation over several layers, scrolling div for fixed elements, absolute for fixed with z-index ....)

Can anyone enlighten me?

Answer 1

I'm not sure what kind of magic you're talking about, but there are certain cases where the CSS backface-visibility property can help push the DOM element to the layer so the browser can use the GPU to display that element.

NOTE : only the hidden value will raise the level, not visible .

In addition, in some cases, this property can correct uneven edges around elements - all thanks to the GPU .

There are several other CSS properties that do the same, for example translateZ(0) or translate3d(0,0,0) . These are all hacks and they will be replaced by the new CSS will-change property.

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