css z-index perdu après webkit transform translate3d

Question

J'ai deux éléments div positionnés de manière absolue qui se chevauchent. Tous deux ont des valeurs de z-index définies par css. J'utilise l'option translate3d webkit transform pour animer ces éléments hors de l'écran, puis de nouveau sur l'écran. Après la transformation, les éléments ne respectent plus leurs paramètres. z-index valeurs.

Quelqu'un peut-il expliquer ce qu'il advient de l'indice z et de l'ordre des éléments div lorsque j'effectue une transformation webkit sur ceux-ci ? Et ce que je peux faire pour conserver l'ordre de superposition des éléments div ?

Voici quelques informations supplémentaires sur la manière dont je procède à la transformation.

Avant la transformation, chaque élément reçoit ces deux valeurs de transition webkit définies via css (j'utilise jQuery pour faire le .css() appels de fonction :

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

L'élément est ensuite animé à l'aide de la transformation translate3d -webkit-transform :

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

Entre-temps, j'ai essayé de régler le troisième paramètre de l'option translate3d à plusieurs valeurs différentes pour essayer de reproduire l'ordre des piles dans l'espace 3D, mais sans succès.

De plus, les navigateurs iPhone/iPad et Android sont les navigateurs cibles sur lesquels ce code doit fonctionner. Les deux supportent les transitions webkit.

Answer 1

Cela pourrait être lié à : https://bugs.webkit.org/show_bug.cgi?id=61824

En fait, lorsque vous appliquez une transformation 3D sur l'axe z, l'indice z ne peut plus être pris en compte (vous êtes maintenant dans un plan de rendu tridimensionnel, utilisez des valeurs z différentes). Si vous voulez revenir à un rendu 2D pour les éléments enfants, utilisez transform-style: flat; .

Answer 2

Ceci est très certainement lié au bogue noté par samy-delux. Cela ne devrait affecter que les éléments qui sont positionnés de manière absolue ou relative. Pour remédier à ce problème, vous pouvez appliquer la déclaration css suivante à chaque élément qui est positionné de cette façon et qui pose problème :

-webkit-transform: translate3d(0,0,0);

Cela appliquera la transformation à l'élément sans réellement effectuer une transformation, mais en affectant son ordre de rendu afin qu'il soit au-dessus de l'élément qui pose problème.

Answer 3

Un peu tard mais essayez de mettre sur les éléments qui ont perdu leur Z-index en plaçant ce qui suit, j'ai eu un problème en faisant des trucs de parallaxe récemment et cela a aidé massivement.

transform-style: preserve-3d;

Cela évite de mettre

transform: translate3d(0,0,0);

Sur d'autres éléments qui sollicitent davantage le GPU.

Answer 4

En attendant de voir l'exemple

Avez-vous essayé de faire une transformation scale(1) ? Je me souviens avoir eu un problème similaire, et j'ai dû réorganiser l'ordre html des éléments, et utiliser une transformation dont je n'avais pas besoin juste parce que le z-index de l'utilisation de la transformation a changé.

Si je ne me trompe pas, chaque fois que vous utilisez une transformation, elle devient le z-index le plus élevé disponible, et elle est ordonnée par l'élément du html le plus proche du début de la balise. Donc de haut en bas.

J'espère que cette aide

Answer 5

z-index fonctionnera contre les divs transformés en 3d si vous donnez un style à l'élément empilable avec -webkit-transform: translateZ(0px);

Snippet sur codepen -> http://codepen.io/mrmoje/pen/yLIul

Dans l'exemple, les boutons stack up et stack down augmente et diminue l'indice z du pied de page (+/-1) par rapport à l'élément pivoté (un img dans ce cas).