transform3d ne fonctionne pas avec position : fixed children

Question

J'ai une situation où, dans des circonstances CSS normales, un div fixe serait positionné exactement là où il est spécifié ( top:0px , left:0px ).

Cela ne semble pas être respecté si j'ai un parent qui a une transformation translate3d. Est-ce que je ne vois pas quelque chose ? J'ai essayé d'autres options webkit-transform comme style et transform origin mais je n'ai pas eu de chance.

J'ai joint un JSFiddle avec un exemple où j'aurais attendu que la boîte jaune soit dans le coin supérieur de la page plutôt qu'à l'intérieur de l'élément conteneur.

Vous trouverez ci-dessous une version simplifiée du violon :

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

Comment faire pour que translate3d fonctionne avec des enfants à position fixe ?

Answer 1

J'ai rencontré le même problème. La seule différence est que mon élément avec 'position : fixed' avait ses propriétés de style 'top' et 'left' définies par JS. J'ai donc pu appliquer un correctif :

var oRect = oElement.getBoundingClientRect();

L'objet oRect contiendra réel (par rapport au port d'affichage) coordonnées supérieures et gauches. Vous pouvez donc ajuster vos propriétés oElement.style.top et oElement.style.left actuelles.

Answer 2

J'ai un problème similaire et je crois qu'il y a un moyen de le contourner. J'utilise snap.js et je veux que l'une des divisions enfant du conteneur de contenu soit fixée à sa position. Cependant, lorsque le tiroir s'ouvre, le JavaScript déclenche la propriété transform:translate3d pour le conteneur parent et cela affecte également l'élément enfant fixe (l'élément fixe se déplace avec son parent et reste fixe dans la nouvelle position).

Ceci étant dit, la propriété fixe devient partiellement inutile. Pour résoudre ce problème, on peut ajouter un écouteur d'événements qui déclencherait un tranform:translate3d distinct pour la div enfant fixe. Et la direction de cette translation devrait être opposée à celle de la transformation:translate3d du parent.

Le seul problème est que je ne sais pas comment l'écrire et que ça aurait été cool que quelqu'un s'y colle.

Answer 3

J'ai une barre latérale hors toile qui utilise -webkit-transform : translate3d. Cela m'empêchait de placer un pied de page fixe sur la page. J'ai résolu le problème en ciblant une classe sur la page html qui est ajoutée à la balise lors de l'initialisation de la barre latérale, puis en écrivant un qualificateur css :not pour indiquer "-webkit-transform : none ;" à la balise html lorsque cette classe n'est pas présente sur la balise html. J'espère que cela aidera quelqu'un qui rencontre le même problème !

Answer 4

Essayez d'appliquer la transformation opposée à l'élément enfant :

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

Answer 5

Ajoutez une classe dynamique pendant que l'élément se transforme. $('#elementId').addClass('transformed') . Ensuite, il faut déclarer en css,

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

puis

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

puis

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

Maintenant position: fixed lorsqu'il est doté d'un top y z-index Les valeurs des propriétés d'un élément enfant fonctionnent bien et restent fixes jusqu'à ce que l'élément parent se transforme. Lorsque la transformation est inversée, l'élément enfant apparaît comme fixe à nouveau. Cela devrait faciliter la situation si vous utilisez une barre latérale de navigation qui s'ouvre et se ferme en fonction d'un clic, et si vous avez un ensemble d'onglets qui doivent rester collés lorsque vous faites défiler la page.