'transform3d' funktioniert nicht mit Position: feste Kinder

Ich habe eine Situation, in der unter normalen CSS-Umständen ein fester Div genau dort positioniert wird, wo er angegeben ist ( top:0px, left:0px).

Dies scheint nicht respektiert zu werden, wenn ich ein Elternteil habe, das eine translate3d-Transformation hat. Sehe ich nichts Ich habe andere Webkit-transformierte Stil- und Ursprungsoptionen ausprobiert, hatte aber kein Glück.

Ich habe eine JSFiddle mit einem Beispiel angehängt, bei dem ich erwartet hätte, dass sich das gelbe Feld in der oberen Ecke der Seite befindet und nicht innerhalb des Containerelements.

Unten finden Sie eine vereinfachte Version der Geige:

#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>

Wie kann ich translate3d mit fest positionierten Kindern zum Laufen bringen?

Dies liegt daran, dass transformein neues lokales Koordinatensystem gemäß W3C-Spezifikation erstellt wird :

Im HTML-Namespace führt jeder andere Wert als nonefür die Transformation dazu, dass sowohl ein Stapelkontext als auch ein enthaltender Block erstellt werden. Das Objekt fungiert als enthaltender Block für fest positionierte Nachkommen.

Dies bedeutet, dass die feste Positionierung eher auf das transformierte Element als auf das Ansichtsfenster festgelegt wird.

Derzeit ist mir keine Problemumgehung bekannt.

Es ist auch in Eric Meyers Artikel dokumentiert: Aufheben fester Elemente mit CSS-Transformationen .

Ich hatte ein Flackern auf meinem festen Top-Navi, als Elemente auf der Seite transformiert wurden. Folgendes, das auf mein Top-Navi angewendet wurde, löste das Problem mit dem Springen / Flackern:

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

Dank dieser Antwort auf SO

Wie Bradoergo vorgeschlagen hat, holen Sie sich einfach das Fenster scrollTopund fügen Sie es der absoluten Position oben hinzu:

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);

Das hat bei mir sowieso funktioniert.

In Firefox und Safari können Sie position: sticky;anstelle von verwenden, position: fixed;aber es funktioniert nicht in anderen Browsern. Dafür benötigen Sie Javascript.

Meiner Meinung nach besteht die beste Methode, um damit umzugehen, darin, dieselbe Übersetzung anzuwenden, aber Kinder, die repariert werden müssen, aus ihrem übergeordneten (übersetzten) Element herauszubrechen. und wenden Sie dann die Übersetzung auf ein Div im position: fixedWrapper an.

Die Ergebnisse sehen ungefähr so ​​aus (in Ihrem Fall):

<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/

Während dies für einige Anwendungsfälle möglicherweise nicht ideal ist, ist es Ihnen normalerweise weniger wichtig, welches Element übergeordnet ist / wo es in den Vererbungsbaum in Ihrem DOM fällt, und es scheint den größten Teil der Kopfschmerzen zu lösen, wenn Sie ein Div reparieren - während man beides erlaubt translateund position: fixedin (relativer) Harmonie lebt.

Ich bin auf dasselbe Problem gestoßen. Der einzige Unterschied besteht darin, dass für mein Element mit 'position: fixed' die Stileigenschaften 'top' und 'left' von JS festgelegt wurden. So konnte ich einen Fix anwenden:

var oRect = oElement.getBoundingClientRect();

oRect-Objekt enthält echte (relativ zum Ansichtsfenster) obere und linke Koordinaten. So können Sie Ihre tatsächlichen Eigenschaften oElement.style.top und oElement.style.left anpassen.

Ich habe eine Seitenleiste außerhalb der Leinwand, die -webkit-transform verwendet: translate3d. Dies hinderte mich daran, eine feste Fußzeile auf der Seite zu platzieren. Ich habe das Problem behoben, indem ich auf eine Klasse auf der HTML-Seite abzielte, die bei der Initialisierung der Seitenleiste zum Tag hinzugefügt wurde, und dann ein CSS: not-Qualifikationsmerkmal mit dem Status "-webkit-transform: none;" zum HTML-Tag, wenn diese Klasse im HTML-Tag nicht vorhanden ist. Hoffe, das hilft jemandem da draußen mit dem gleichen Problem!

Versuchen Sie, eine entgegengesetzte Transformation auf das untergeordnete Element anzuwenden:

<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>

Fügen Sie eine dynamische Klasse hinzu, während sich das Element transformiert. $('#elementId').addClass('transformed'). Dann deklarieren Sie in 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 
}

dann

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

dann

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

Nun , position: fixedwenn sie mit einem vorgesehenen topund z-indexEigenschaftswert für ein untergeordnetes Element nur gut funktionieren und Aufenthalt festgelegt , bis der übergeordneten Element verwandelt. Wenn die Umwandlung zurückgesetzt wird, wird das untergeordnete Element wieder als fest angezeigt. Dies sollte die Situation verschlechtern, wenn Sie tatsächlich eine Navigationsseitenleiste verwenden, die beim Klicken um- und geschlossen werden kann, und Sie haben eine Registerkarte, die beim Scrollen auf der Seite klebrig bleiben sollte.

Eine Möglichkeit, damit umzugehen, besteht darin, dieselbe Transformation auf das feste Element anzuwenden:

<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>