web-dev-qa-db-fra.com

webkit-transformer écrase la commande z-index dans Chrome 13

Mise à jour

Désolé d'avoir échoué à ajouter les détails mineurs que nous superposons également de nombreux éléments div éléments les uns sur les autres avec z-index. Après avoir travaillé plus avec ce problème, il semble que le webkit-transform fait des dégage avec le z-index commande et que le problème réel n'est pas lié aux animations elles-mêmes.

fin de mise à jour

Je suis actuellement dans un projet où nous développons une application assez lourde sur les animations CSS3. Nous animons beaucoup de div éléments autour de -webkit-transform et -webkit-transition.

Tout va bien, jusqu'à aujourd'hui où tous les éléments de tous les éléments animés de la page ont disparu. Il semble que Google Chrome a été mis à jour à partir de 12.xx à 13.0.782.107m et maintenant, toutes soudaines, CSS3 propriétés avec -webkit Les préfixes ont cessé de fonctionner et des éléments qui ont appliqué cette propriété qui leur sont appliqués ne montrent plus. Suppression de la -webkit-transform Propriété via le Chrome débogueur rend les éléments visibles à nouveau.

Quelqu'un d'autre a-t-il expérimenté les mêmes problèmes ou savez-vous résoudre ce problème?

J'ajouterais que j'ai essayé de supprimer juste le -webkit Préfixes (laissant juste transform), qui affiche ensuite les éléments manquants, mais qui n'anniera pas du tout les éléments, car la propriété CSS3 transform n'est pas prise en charge.

J'ai aussi essayé d'utiliser el.style.webkitTransform et el.style.WebkitTransform, sans succès.

Passera un exemple de code à expliquer. Le résultat souhaité est de déplacer sq1 loin et 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)";
javascriptgoogle-chromecsswebkit
31
simonauner

Cela ne devrait affecter que tous les éléments qui sont positionnés comme absolus ou relatifs. Afin de remédier à la question, vous pouvez appliquer l'instruction CSS suivante à chaque élément qui est positionné de cette façon et causant des problèmes:

-WebKit-Transform: traduction3d (0,0,0);

Cela appliquera la transformation à l'élément sans effectuer une transformation, mais qui affecte son ordre de rendu, il est donc au-dessus de l'élément causant la question.

5
Mayank

Je pense que vous devez essayer d'utiliser -webkit-transform ou webkitTransform au lieu de webkit-transform.

0
Rich Bradshaw

Utilisation el.style.WebkitTransform (majuscule W).

0
duri