J'ai deux éléments div absolument positionnés qui se chevauchent. Les deux ont défini des valeurs d'index z via css. J'utilise la translate3d
transformation Webkit pour animer ces éléments hors de l'écran, puis les remettre à l'écran. Après la transformation, les éléments ne respectent plus leurs z-index
valeurs définies .
Quelqu'un peut-il expliquer ce qui arrive au z-index / stack-order des éléments div une fois que j'effectue une transformation webkit sur eux? Et expliquez ce que je peux faire pour conserver l'ordre de pile des éléments div?
Voici quelques informations supplémentaires sur la façon dont je fais la transformation.
Avant la transformation, chaque élément obtient ces deux valeurs de transition webkit définies via css (j'utilise jQuery pour faire les .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 translate3d -webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Btw, j'ai essayé de définir le 3ème paramètre de translate3d
sur plusieurs valeurs différentes pour essayer de reproduire l'ordre de la pile dans l'espace 3D, mais sans succès.
En outre, les navigateurs iPhone / iPad et Android sont mon navigateur cible sur lequel ce code doit fonctionner. Les deux prennent en charge les transitions Webkit.
Réponses:
Cela pourrait être lié à: https://bugs.webkit.org/show_bug.cgi?id=61824
En gros, lorsque vous appliquez une transformation 3D sur l'axe z, l'index z ne peut plus être pris en compte (vous êtes maintenant dans un plan de rendu en 3 dimensions, utilisez des valeurs z différentes). Si vous souhaitez revenir au rendu 2D pour les éléments enfants, utilisez
transform-style: flat;
.la source
transform-style: flat;
.Ceci est très certainement lié au bogue noté par samy-delux. Cela ne devrait affecter que les éléments positionnés comme absolus ou relatifs. Afin de remédier au problème, vous pouvez appliquer l'instruction css suivante à chaque élément qui est positionné de cette façon et cause des problèmes:
Cela appliquera la transformation à l'élément sans réellement effectuer de transformation, mais affectant son ordre de rendu afin qu'il soit au-dessus de l'élément à l'origine du problème.
la source
Un peu tard, mais essayez de mettre 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 énormément aidé.
Cela évite de mettre
Sur d'autres éléments qui mettent plus de pression sur le GPU
la source
En attendant de voir l'exemple
Avez-vous essayé de faire une échelle de transformation (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'en avais pas besoin simplement parce que le z-index de l'utilisation de transform avait changé.
Si je ne suis pas dans l'erreur, chaque fois que vous utilisez une transformation, elle devient le z-index le plus élevé disponible, et il est ordonné par l'élément html le plus proche au début de la balise. Donc de haut en bas.
J'espère que cette aide
la source
z-index
fonctionnera avec les divs transformés en 3D si vous stylisez l'élément empilable avec-webkit-transform: translateZ(0px);
Extrait sur codepen -> http://codepen.io/mrmoje/pen/yLIul
Dans l'exemple, les boutons
stack up
etstack down
montent et abaissent l'index z du pied de page (+/- 1) contre l'élément pivoté (une image dans ce cas).la source
Je n'ai pas pu reproduire le problème que vous décrivez ici. Indépendamment de ce que je fais, la valeur z-index est conservée dans toutes les transformations. Je teste avec Chromium (Google Chrome).
Le troisième argument de la fonction translate3d manipule l'axe z de l'élément. Le concept est similaire, mais pas exactement le même que, l'indice z ... Les éléments avec un axe z inférieur sont sous les éléments avec une valeur plus élevée.
Je sais que vous avez essayé les valeurs du troisième argument pour correspondre à votre z-index prévu, mais le problème est que l'axe z ne semble pas changer pendant l'animation CSS3. Dans l'exemple suivant, l'élément survolé doit être en haut, mais #element_a reste en haut.
Si j'ajoute un z-index à la fois au sélecteur régulier et au sélecteur: hover, cela semble fonctionner et permettre à l'élément survolé d'être le plus haut.
Bien que ce ne soit pas exactement ce que vous recherchiez, ce comportement offre une solution. Il vous suffit d'utiliser translate3d et z-index pour définir l'ordre du rendu initial.
la source
Une autre façon de contourner cela est de créer un élément parent et d'appliquer toutes les autres transitions qui lui sont liées:
JsFiddle
la source