'transform3d' ne fonctionne pas avec la position: enfants fixes

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 de style et d'origine de transformation de type Webkit, mais je n'ai pas eu de chance.

J'ai joint un JSFiddle avec un exemple où je me serais attendu à ce 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 pouvez trouver 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 puis-je faire fonctionner translate3d avec des enfants à position fixe?

En effet, le transformcrée un nouveau système de coordonnées local, selon les spécifications du W3C :

Dans l'espace de noms HTML, toute valeur autre que celle nonede la transformation entraîne la création à la fois d'un contexte d'empilement et d'un bloc conteneur. L'objet agit comme un bloc conteneur pour les descendants positionnés fixes.

Cela signifie que le positionnement fixe devient fixe à l'élément transformé, plutôt qu'à la fenêtre.

Il n'y a actuellement pas de solution de rechange à ma connaissance.

Il est également documenté dans l'article d'Eric Meyer: Un-fix Fixed Elements with CSS Transforms .

J'ai eu un scintillement sur ma navigation supérieure fixe lorsque les éléments de la page utilisaient la transformation, ce qui suit appliqué à ma navigation supérieure a résolu le problème de saut / scintillement:

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Merci à cette réponse sur SO

Comme Bradoergo l'a suggéré, récupérez simplement la fenêtre scrollTopet ajoutez-la au sommet de la position absolue comme:

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

Cela a fonctionné pour moi de toute façon.

Dans Firefox et Safari, vous pouvez utiliser à la position: sticky;place de position: fixed;mais cela ne fonctionnera pas dans d'autres navigateurs. Pour cela, vous avez besoin de javascript.

À mon avis, la meilleure méthode pour résoudre ce problème est d'appliquer la même traduction, mais de séparer les enfants qui doivent être corrigés de leur élément parent (traduit); puis appliquez la traduction à un div à l'intérieur du position: fixedwrapper.

Les résultats ressemblent à ceci (dans votre cas):

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle: https://jsfiddle.net/hju4nws1/

Bien que cela puisse ne pas être idéal pour certains cas d'utilisation, généralement si vous corrigez un div, vous pourriez probablement moins vous soucier de quel élément est son parent / où il se situe dans l'arbre d'héritage de votre DOM, et semble résoudre la plupart des maux de tête. - tout en permettant les deux translateet position: fixedde vivre en harmonie (relative).

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 à partir de JS. J'ai donc pu appliquer un correctif:

var oRect = oElement.getBoundingClientRect();

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

J'ai une barre latérale hors canevas 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 css: not qualifier to state "-webkit-transform: none;" à la balise html lorsque cette classe n'est pas présente sur la balise html. J'espère que cela aide quelqu'un avec ce même problème!

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>

Ajoutez une classe dynamique pendant que l'élément se transforme. $('#elementId').addClass('transformed'). Ensuite, déclarez 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);
    }
}

Désormais, position: fixedlorsqu'elles sont fournies avec des valeurs de propriété topet z-indexsur un élément enfant, elles fonctionnent correctement et restent fixes jusqu'à ce que l'élément parent se transforme. Lorsque la transformation est annulée, l'élément enfant apparaît à nouveau comme fixe. Cela devrait faciliter la situation si vous utilisez réellement une barre latérale de navigation qui s'ouvre et se ferme en un clic, et que vous avez un ensemble d'onglets qui devrait rester collant lorsque vous faites défiler la page.

Une façon de gérer cela consiste à appliquer la même transformation à l'élément fixe:

<br>
<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(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>