Why Does WebKit's `translate3d` Break CSS `z-index` Stacking?

WebKit Transform Translate3D Disrupts CSS Z-Index

When absolutely positioned, overlapping elements are subject to z-index stacking, determining their relative order on the canvas. However, employing the translate3d webkit transform for animation disrupts this stacking behavior. This problem affects all major mobile browsers that support webkit transitions.

Understanding the Issue

As reported in the WebKit bug database (https://bugs.webkit.org/show_bug.cgi?id=61824), applying a 3D transform on the z-axis overrides z-index values. The reason lies in the transition from a 2D rendering plane to a 3D rendering plane. Within the 3D space, z-values determine element positioning, rendering z-index irrelevant.

Resolving the Issue

To prevent this disruption, one must return to 2D rendering for child elements by applying the following CSS property:

transform-style: flat;

This property ensures that child elements remain in the 2D rendering plane, preserving their z-index stacking behavior even after the parent element's 3D transform.

The above is the detailed content of Why Does WebKit's `translate3d` Break CSS `z-index` Stacking?. For more information, please follow other related articles on the PHP Chinese website!