Pourquoi « translate3d » de WebKit brise-t-il l'empilement CSS « z-index » ?

WebKit Transform Translate3D perturbe l'index Z CSS

Lorsqu'ils sont positionnés de manière absolue, les éléments qui se chevauchent sont soumis à un empilement d'index z, déterminant leur ordre relatif sur la toile. Cependant, l'utilisation de la transformation webkit Translate3d pour l'animation perturbe ce comportement d'empilement. Ce problème affecte tous les principaux navigateurs mobiles prenant en charge les transitions WebKit.

Comprendre le problème

Comme indiqué dans la base de données de bogues WebKit (https://bugs.webkit.org /show_bug.cgi?id=61824), l'application d'une transformation 3D sur l'axe z remplace les valeurs de l'index z. La raison réside dans le passage d’un plan de rendu 2D à un plan de rendu 3D. Dans l'espace 3D, les valeurs z déterminent le positionnement des éléments, rendant l'index z non pertinent.

Résoudre le problème

Pour éviter cette perturbation, il faut revenir au rendu 2D. pour les éléments enfants en appliquant la propriété CSS suivante :

transform-style: flat;

Cette propriété garantit que les éléments enfants restent dans le plan de rendu 2D, en préservant leur comportement d'empilement z-index même après la transformation 3D de l'élément parent.

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!