Position Fixed funktioniert nicht, wenn -webkit-transform verwendet wird

Question 1

Ich verwende -webkit-transform (und -moz-transform / -o-transform), um ein div zu drehen. Haben Sie auch eine feste Position hinzugefügt, damit das div mit dem Benutzer nach unten scrollt.

In Firefox funktioniert es gut, aber in Webkit-basierten Browsern ist es kaputt. Nach Verwendung des -webkit-transform funktioniert die fixierte Position nicht mehr! Wie ist das möglich?

Question 2

Der CSS-Transformationsspezifikation erklärt dieses Verhalten. Elemente mit Transformationen fungieren als umschließender Block für Nachkommen mit fester Position, sodass position:fixed unter etwas mit einer Transformation kein festes Verhalten mehr hat.

Sie funktionieren, wenn sie auf dasselbe Element angewendet werden; Das Element wird als fixiert positioniert und dann transformiert.

Question 3

Nach einiger Recherche gab es eine Fehlerbericht auf der Chrom Website zu diesem Problem, bisher können Webkit-Browser diese beiden Effekte nicht gleichzeitig darstellen.

Ich würde vorschlagen, Ihrem Stylesheet etwas nur Webkit-CSS hinzuzufügen und das transformierte div zu einem Bild zu machen und es als Hintergrund zu verwenden.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

Im Moment müssen Sie es also auf die altmodische Weise tun, bis die Webkit-Browser zu FF aufschließen.

EDIT: Bis zum 24.10.2012 wurde der Fehler nicht behoben.

Dies scheint kein Fehler zu sein, sondern ein Aspekt der Spezifikation, da die beiden Effekte separate Koordinatensysteme und Stapelreihenfolgen erfordern. Wie in dieser Antwort erläutert.

Question 4

Etwas (ein bisschen hacky), das für mich funktioniert hat, ist zu position:sticky stattdessen:

.fixed {
     position: sticky;
}

Question 5

Für alle, die feststellen, dass ihre Hintergrundbilder in Chrome wegen des gleichen Problems mit dem Hintergrundanhang verschwinden: behoben; – das war meine Lösung:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}

Question 6

August 2016 und fixe Position & Animation/Transformation ist immer noch ein Problem. Die einzige Lösung, die für mich funktioniert hat, war das Erstellen einer Animation für das untergeordnete Element, die länger dauert.

Question 7

Eigentlich habe ich einen anderen Weg gefunden, diesen “Fehler” zu beheben:

Ich habe ein Containerelement, das eine Seite mit CSS3-Animationen enthält. Wenn die Seite die Animation abgeschlossen hat, hat die css3-Eigenschaft den Wert: transform: translate(0,0);. Also habe ich diese Zeile einfach entfernt und alles funktionierte wie es sollte – position: fixed wird richtig angezeigt. Wenn die CSS-Klasse angewendet wird, um die Seite zu übersetzen, wird die Translate-Eigenschaft hinzugefügt und die CSS3-Animation funktionierte ebenfalls.

Beispiel:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

Demo:
http://jsfiddle.net/ZWcD9/

Question 8

Ich hatte dieses Problem, als ich versuchte, React-Color mit React-Swipeable-Views (rsw) zu implementieren. Das Problem für mich war, dass rsw gilt translate(-100%, 0) zu einem Registerkartenfeld, das das standardmäßige div mit fester Position aufhebt, das über dem gesamten Bildschirm hinzugefügt wird und beim Klicken das Farbwählermodell schließt.

Für mich bestand die Lösung darin, die entgegengesetzte Transformation auf das feste Element anzuwenden (in diesem Fall translate(100%, 0) was mein Problem behoben hat. Ich bin mir nicht sicher, ob dies in anderen Fällen nützlich ist, aber ich dachte, ich würde es trotzdem teilen.

Hier ist ein Beispiel, das zeigt, was ich oben beschrieben habe:

https://codepen.io/relativemc/pen/VwweEez