iOS 9 Safari: Wenn Sie ein Element während des Bildlaufs in eine feste Position ändern, wird erst nach dem Stopp des Bildlaufs gemalt

68

Ich habe eine Site entwickelt und das ziemlich gute jQuery Sticky Kit- Plugin genutzt. Es funktioniert, indem die positionEigenschaft fixedbei Bedarf hin und zurück geschaltet wird . Läuft sehr reibungslos auf dem Desktop und akzeptabel auf Mobilgeräten.

Oder zumindest früher. iOS 9 weist ein neues Verhalten auf: Wenn sich das positionElement während der laufenden Bildlaufanimation von static/ relative/ absoluteauf ändert, fixedwird das Element unsichtbar, bis der Bildlauf zum Stillstand gekommen ist. Seltsamerweise ändert sich das Gegenteil (vonfixed zu was auch immer) ohne Probleme durchgeführt.

Ein funktionierendes Beispiel finden Sie auf der Homepage des Plugins . Die schwarze Navigationsleiste ("Beispielreferenz") soll klebrig sein. Ursprünglich ist es nur staticin der Mitte der Seite positioniert. Wenn Sie nach unten scrollen, wird es fixedund (in iOS 9) verschwindet, bis der Bildlauf stoppt. Das Verhalten in Desktop-Browsern und iOS 8 ist korrekt.

Ich hatte irgendwie auf die typischen CSS-Problemumgehungen gehofft: Erzwingen einer 3D-Transformation, Deaktivieren der Sichtbarkeit der Rückseite und dergleichen, obskure proprietäre Eigenschaften, ... Aber nichts scheint zu funktionieren.

Werden wir "klebrige" Elemente jetzt ganz vergessen, wo es funktioniert hat?

Instanz von null
quelle
2
Wenn Sie für iOS entwickeln, sollten Sie die bessere Lösung position: stickyin CSS verwenden, allerdings hinter einem Präfix. Sie können Ihr jQuery-Plugin für alles andere behalten und die native CSS-Lösung für iOS verwenden, wo sie unterstützt wird (7+, wenn ich mich recht erinnere).
TylerH
1
Nun, ich entwickle für alles, aber dies ermöglicht einen gemischten Ansatz. Vielen Dank!
Instanz des
1
Ein paar Stunden nach dem Ausprobieren kann ich feststellen, dass die Unterstützung für Sticky-Header in iOS ziemlich gut ist, aber alles geht schief, wenn Sie zu Sticky-Spalten gelangen. Noch ein bisschen zu grün.
Instanz des

Antworten:

78

Ich hatte das gleiche Problem und konnte es mit dem alten Trick "3D-Transformation erzwingen" umgehen. Stellen Sie einfach das Element ein, dessen Position Sie ändern möchten, um eine Transformationseigenschaft von zu erhalten translate3d(0px,0px,0px). Stellen Sie sicher, dass dies erfolgt, bevor die Positionseigenschaft geändert wird.

Nathan G.
quelle
14
translate3d()verursachte einige Layoutprobleme für mich, translateZ(0)arbeitete aber einen Zauber
nichts,
3
Ich hatte translate3d () für dieselbe CSS-Klasse. Der Trick besteht darin, dass es vorhanden sein sollte, bevor die Position geändert oder die neue Klasse hinzugefügt wird. Dank dafür!
André Gil
2
Dies scheint für mich unter iOS 10 nicht zu funktionieren ... nun, es funktioniert, aber ich kann es brechen, indem ich wie das feste Element 'Sticks' ziehe und dann die Richtung meines Ziehens in die andere Richtung ändere :-(
Simon_Weaver
Leider scheint dies bei Safari 9.0 nicht zu funktionieren. Nichts tut. Ausblenden / Anzeigen, Hinzufügen eines Elements, Hinzufügen einer CSS-Animation, Zugriff auf offsetHeight. Ich habe jeden Trick ausprobiert, den ich finden kann, und trotzdem wird diese Kopfzeile nicht in der festen Position neu
gestrichen,
Ich habe buchstäblich Tage damit verbracht, herauszufinden, wie ich Styling-Änderungen in meinem klebrigen Header korrigieren kann, die erst wirksam werden, wenn das Scrollen vollständig gestoppt ist und das Ganze klobig und seltsam aussieht. Durch Hinzufügen transform: translateZ(0);zum Standardelementstil wurde dies behoben, und jetzt erfolgen die Stilübergänge beim Scrollen reibungslos. Wunderbar! Danke an alle! (Getestet in Chrome und Safari auf dem iPad Mini mit iOS 10.0.2)
Katrin
17

Die einzige Lösung, die ich als richtig befunden habe, war das Deaktivieren von Z-Index-Übersetzungen für direkte untergeordnete Elemente des festen Elements, z.

.is-sticky > * {
    -webkit-transform: translateZ(0);
}
Seth Warburton
quelle
4

Ich habe dieses Problem mit einem extra festen Element behoben. Nach einigen Tests fand ich heraus, dass es das erste Element ist, das dieses Problem behebt. Die 2., 3. usw. funktioniert auf iOS-Geräten einwandfrei.

Setzen Sie also direkt nach dem Öffnen Ihres Körpers einen div.fixed-fix:

.fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

jetzt funktioniert es! Das Fixed-Fix-Div MUSS eine Hintergrundfarbe haben, da es sonst nicht funktioniert ...

Arnaud van Zandwijk
quelle
3
Dies scheint für mich unter iOS10 nicht zu funktionieren. Vielleicht haben sie es "repariert"? Ich hatte wirklich gehofft, dass es so sein würde, weil ich die translateOption sehr
unangenehm finde
3

jQuery Sticky Kit und andere ähnliche Plugins, die sogar gut codiert sind, zeigen diese Art von Verhalten unter iOS 9, und es ist nicht das erste Mal, dass so etwas passiert. Der wichtigste Punkt hierbei ist, dass Firefox Safari und Safari Mobile das Experiment unterstützenposition: sticky; , ebenso wie Google (Chromium). Aufgrund von Integrationsproblemen musste es jedoch vorübergehend deaktiviert werden . Weitere Informationen hierzu finden Sie hier . Ich vermute jedoch, dass sehr baldposition: sticky;wird Teil der CSS-Spezifikation sein und von allen gängigen Browsern unterstützt werden. Daher denke ich, dass der beste Ansatz zur Lösung dieses Problems darin besteht, eine Polyfüllung anstelle eines Plugins zu verwenden. Natürlich wird eine Polyfüllung nicht alle Merkmale und Funktionen abdecken, die diese Plugins bieten. In vielen Situationen ist die Verwendung einer Polyfüllung jedoch eine robuste und effektive Lösung, die von allen gängigen Browsern unterstützt wird. Meiner Meinung nach ist es vorerst der richtige Weg. Ich persönlich benutze Stickyfill, obwohl ich sicher bin, dass andere Polyfills in freier Wildbahn den Trick machen werden. Alles was ich sagen kann ist, dass ich, seit ich angefangen habe, eine Polyfüllung anstelle von Plugins zu verwenden, keine Probleme mit der Browserkompatibilität hatte.

user3724945
quelle
0

Fügen Sie dies Ihrem festen Element hinzu.
Verwenden einer Mischung: @include transform(translate3d(0px,0px,0px))
Verwenden von CSS: translate3d(0px,0px,0px)

Yaron
quelle
4
Die Verwendung von "SCSS" ist einfach falsch. Was Sie empfehlen, ist ein Mixin, wahrscheinlich vom Kompass ...
Yckart
1
Die Verwendung von SCSS ist nicht falsch. Sie ersparen sich lediglich die Mühe, jedes einzelne Browserpräfix eingeben zu müssen.
Zanderi
2
.... urm .... außer dass dies [wahrscheinlich] nur ein iOS '.issue' ist und Sie sich daher keine Gedanken über Präfixe machen müssen
Simon_Weaver