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

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?

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.

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

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

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.

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