About backface-visibility: hidden;

Question

Why is it so this property is required in Chrome when doing transitions?

Without it, transitions are very slow, especially on mobile browsers. How does this property or the lack of it affect performance?

In the docs it says

This property has no effect on 2D transforms as there is no perspective.

But that doesn't seem to be true because it makes a difference in performance even when using 2D transforms

Answer 1

backface-visibility: hidden makes the rendering engine treat the element as 3D (the same effect as, say, transform: translateZ(0)), making use of more graphics acceleration and all that fancy stuff.