Pourquoi `translate3d` interrompt-il l'ordre de l'index Z dans les éléments superposés absolument positionnés ?

Anomalies d'index Z avec Webkit Transform Translate3d

Dans un scénario où deux éléments div positionnés de manière absolue avec des valeurs d'index z spécifiées se chevauchent, en appliquant une transformation du kit Web Translate3d pour les animer et revenir à l'écran peut perturber leur z-index commande.

Explication

Lors de l'utilisation de Translate3D, les éléments entrent dans un plan de rendu tridimensionnel, où l'index z n'a plus d'importance. La transformation déplace les éléments le long de l'axe z, rompant ainsi l'ordre d'empilement 2D traditionnel.

Solution

Pour restaurer l'ordre de l'index z :

1. Revenir au rendu 2D pour les éléments enfants en définissant transform-style: flat;. Cela oblige les éléments à se comporter comme s'ils se trouvaient dans un espace 2D plat.

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

Notes supplémentaires

• Le problème peut être lié au bug Webkit n°61824.
• La solution fonctionne pour les navigateurs iPhone/iPad et Android prenant en charge Webkit transitions.
• Définir le troisième paramètre de translation3d sur des valeurs différentes ne résout pas le problème de l'ordre de la pile dans l'espace 3D.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!