webkit-transform remplace z-index de la commande en Chrome 13
Mise à jour
Désolé pour ne pas avoir à ajouter le petit détail que nous avons aussi de la couche de beaucoup de div éléments l'un sur l'autre avec z-index.
Après avoir travaillé plus avec ce problème, il semble que le webkit-transform fait mess avec le z-index de la commande, et que le véritable problème n'est pas lié à la animations eux-mêmes.
Mise à jour de fin
Je suis actuellement dans un projet où nous développer une application qui est assez lourd sur les animations CSS3. Nous sommes à l'animation d'un lot de div éléments autour avec -webkit-transform et -webkit-transition.
Tout va bien, jusqu'à aujourd'hui, où l'ensemble de l'animation des éléments de la page a disparu. Il semble que Google Chrome a mis à jour de 12.xx à 13.0.782.107 m et maintenant, tout d'un coup, propriétés CSS3 avec -webkit préfixes a cessé de travailler, et les éléments qui ont cette propriété appliquée à leur juste ne présente plus. Retrait de la -webkit-transform propriété grâce au Chrome débogueur qui rend les éléments encore visibles.
Quelqu'un d'autre a connu les mêmes problèmes, ou de savoir comment résoudre ce problème?
Je pourrais ajouter que j'ai essayé de supprimer le -webkit préfixes (en laissant juste transform), qui fait alors apparaître les éléments manquants, mais alors pour ne pas les animer les éléments, comme la propriété CSS3 transform n'est pas pris en charge.
J'ai aussi essayé d'utiliser el.style.webkitTransform et el.style.WebkitTransform, sans succès.
Va passer quelques exemples de code pour expliquer. Le résultat désiré, c'est de déplacer sq1 loin et de révéler sq2.
HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">
JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";- Je sais que cette question est ancienne, mais si quelqu'un en trouve,
z-indexest au sujet de la CSS ordre d'empilement, ettransforms'agit de transformer un élément dans l'espace 3D, qui sont sans rapport avec les concepts.
Vous devez vous connecter pour publier un commentaire.
Résolu moi-même par essai et erreur. Je pensais que je serais un rapport si quelqu'un tombe sur ce problème. Il est encore à noter que ce problème ne se produit pas avant Chrome mis à jour pour Chrome 13 (13.0.782.107 m).
Le truc semble être ici pour ajouter un
translate3dfonctionnement de la sous -<div>(sq2) de l'élément lors de la déclaration (ou au moins avant d'animersq1).Sinon, le
translate3dopération sur le recouvrant<div>(sq1) permet de faire le rendu d'ignorer laz-indexet placesq1ci-dessoussq2. Je suppose que c'est parce quesq1est défini avantsq2dans les DOM, doncsq2sera rendu au-dessus d'elle.Donc, la solution semble être de mettre
translate3ddans la définition de la<div>:s (ajouter à la fois juste pour être clair):translate3d(0,0,0)de L2' div et les choses fonctionnent très bien. Avez des conseils pour l'explication?Cela ne devrait toucher que les éléments qui sont positionnés de manière absolue ou relative. Afin de remédier au problème, vous pouvez appliquer la suivante déclaration css pour chaque élément qui est positionné de cette façon et est à l'origine de problèmes:
-webkit-transform: translate3d(0,0,0);
Cela permettra d'appliquer la transformation de l'élément, sans faire une transformation, mais affectent l'ordre de rendu de sorte qu'il est au-dessus de l'élément à l'origine du problème.
Je pense que vous devez essayer d'utiliser
-webkit-transformouwebkitTransformau lieu dewebkit-transform.Utilisation
el.style.WebkitTransform(en majuscules W).webkitTransformetWebkitTransformdans la question.Votre manque le - sur la deuxième ligne, ce qui pourrait être le problème.