Why Does `translate3d` Break Z-Index Ordering in Overlapping Absolutely Positioned Elements?

Z-Index Anomalies with Webkit Transform Translate3d

In a scenario where two absolutely positioned div elements with specified z-index values overlap, applying a translate3d webkit transform to animate them off and back onto the screen can disrupt their z-index ordering.

Explanation

When using translate3d, the elements enter a three-dimensional rendering plane, where z-index becomes irrelevant. The transform moves the elements along the z-axis, breaking the traditional 2D stacking order.

Solution

To restore the z-index ordering:

1. Switch back to 2D rendering for child elements by setting transform-style: flat;. This forces the elements to behave as if they were in a flat 2D space.

element.css({ 'transform-style': 'flat' });

Additional Notes

• The issue may be related to Webkit bug #61824.
• The solution works for iPhone/iPad and Android browsers that support Webkit transitions.
• Setting the third parameter of translate3d to different values does not address the stack-order issue in the 3D space.

The above is the detailed content of Why Does `translate3d` Break Z-Index Ordering in Overlapping Absolutely Positioned Elements?. For more information, please follow other related articles on the PHP Chinese website!