Beim Scrollen mit iPad Safari verschwinden HTML-Elemente und werden verzögert wieder angezeigt

Ich entwickle derzeit eine Web-App mit HTML5 und jQuery für iPad Safari. Ich habe ein Problem, bei dem große Bildlaufbereiche dazu führen, dass die Elemente außerhalb des Bildschirms nach einer Verzögerung angezeigt werden, wenn ich zu ihnen scrolle.

Was ich damit meine ist, wenn ich eine Reihe von Bildern (oder sogar ein Div mit einem Farbverlauf) außerhalb des Bildschirms habe , wenn ich nach unten (oder oben) scrolle, ist das erwartete Verhalten, dass das Element auf dem Bildschirm als angezeigt wird Ich scrolle dorthin.

Aber was ich sehe ist , dass das Element nicht angezeigt , bis ich meine Finger vom Bildschirm und das Stellrad beendet heben alle seine Animationen.

Dies verursacht für mich ein sehr auffälliges Problem, das das Ganze abgehackt aussehen lässt, obwohl dies nicht der Fall ist. Ich vermute, das iPad Safari versucht etwas zu tun, um Speicherplatz zu sparen. Gibt es eine Möglichkeit, wie ich verhindern kann, dass diese Unruhe entsteht? Darüber hinaus würde ich mich auch freuen, wenn jemand Aufschluss darüber geben kann, was die iPad Safari tatsächlich versucht.

Sie müssen den Browser austricksen, um die Hardwarebeschleunigung effektiver nutzen zu können. Sie können dies mit einer leeren 3D-Transformation tun:

-webkit-transform: translate3d(0,0,0)

Insbesondere benötigen Sie dies für untergeordnete Elemente, die eine position:relative;Deklaration haben (oder gehen Sie einfach alles aus und tun Sie es für alle untergeordneten Elemente).

Keine garantierte Lösung, aber die meiste Zeit ziemlich erfolgreich.

Hutspitze: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Dies ist die vollständige Antwort auf meine Frage. Ich hatte ursprünglich die Antwort von @Colin Williams als die richtige Antwort markiert, da dies mir half, zur vollständigen Lösung zu gelangen. Ein Community-Mitglied, @Slipp D. Thompson, hat meine Frage bearbeitet, nachdem ich sie etwa 2,5 Jahre lang gestellt hatte, und mir mitgeteilt, dass ich das Q & A-Format von SO missbraucht habe. Er sagte mir auch, ich solle dies separat als Antwort posten. Hier ist die vollständige Antwort, die mein Problem gelöst hat:

@Colin Williams, danke! Ihre Antwort und der Artikel, auf den Sie verlinkt haben, haben mich dazu veranlasst, etwas mit CSS auszuprobieren.

Also habe ich zuvor translate3d verwendet. Es wurden unerwünschte Ergebnisse erzielt. Grundsätzlich würde es Elemente, die sich außerhalb des Bildschirms befanden, abhacken und NICHT RENDEREN, bis ich mit ihnen interagierte. Im Querformat wurde also die Hälfte meiner Website, die sich außerhalb des Bildschirms befand, nicht angezeigt. Dies ist eine iPad-Web-App, aufgrund derer ich in einem Fix war.

Das Anwenden von translate3d auf relativ positionierte Elemente löste das Problem für diese Elemente, aber andere Elemente wurden nach dem Bildschirm nicht mehr gerendert. Die Elemente, mit denen ich nicht interagieren konnte (Grafik), würden nie wieder gerendert, wenn ich die Seite nicht neu geladen hätte.

Die Komplettlösung:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Obwohl dies möglicherweise nicht die "effizienteste" Lösung ist, war es die einzige, die funktioniert. Mobile Safari rendert die Elemente nicht außerhalb des Bildschirms oder manchmal unregelmäßig, wenn sie verwendet werden-webkit-overflow-scrolling: touch . Sofern nicht ein translate3d auf alle anderen Elemente angewendet wird, die aufgrund dieses Bildlaufs möglicherweise vom Bildschirm verschwinden, werden diese Elemente nach dem Bildlauf abgeschnitten.

Also nochmals vielen Dank und hoffe, dass dies einer anderen verlorenen Seele hilft. Das hat mir sicherlich sehr geholfen!

Targeting aller Elemente außer HTML: *:not(html) verursachte in meinem Fall Probleme mit anderen Elementen. Es hat den Stapelkontext geändert und dazu geführt, dass ein Z-Index unterbrochen wurde.

Wir sollten besser versuchen, das richtige Element zu finden und anzuwenden-webkit-transform: translate3d(0,0,0) .

Bearbeiten: Manchmal translate3D(0,0,0)funktioniert das nicht. Wir können die folgende Methode verwenden, die auf das richtige Element abzielt:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Wenn die translate3d nicht funktioniert, versuchen Sie, eine Perspektive hinzuzufügen. Es funktioniert immer bei mir

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Hinzufügen -webkit-transform: translate3d(0,0,0) statische zu einem Element funktioniert bei mir nicht.

Ich wende diese Eigenschaft dynamisch an. Wenn zum Beispiel eine Seite gescrollt wird, setze ich -webkit-transform: translate3d(0,0,0)ein Element. Nach einer kurzen Verzögerung setze ich diese Eigenschaft zurück, d. H.-webkit-transform: none Ansatz scheint zu funktionieren.

Vielen Dank, @Colin Williams, dass Sie mich in die richtige Richtung weisen.

Ich hatte das gleiche Problem mit iscroll 4.2.5 auf ios7. Das gesamte Bildlaufelement verschwindet einfach. Ich habe versucht hinzuzufügen, translate3d(0,0,0)wie hier vorgeschlagen, es hat das Problem gelöst, aber es hat den iscroll "Snap" -Effekt deaktiviert. Die Lösung bestand darin "position:relative; z-index:1000;display:block", dem gesamten Container, der das Bildlaufelement enthält , CSS-Eigenschaften zuzuweisen, und es ist nicht erforderlich, untergeordneten Elementen translate3d zuzuweisen.

Zur Zeit translate3dmöglicherweise nicht funktioniert, in diesen Fällen perspectivekann verwendet werden

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Ich bin mir ziemlich sicher, dass ich das gerade gelöst habe mit:

overflow-y: auto;

(Vermutlich overflow: auto;würde es auch funktionieren, abhängig von Ihren Bedürfnissen.)

Es gibt Fälle, in denen eine Drehung angewendet und / oder ein Z-Index verwendet wird.

Drehung : Eine vorhandene Deklaration -webkit-transformzum Drehen eines Elements reicht möglicherweise nicht aus, um auch das Erscheinungsbildproblem (wie -webkit-transform: rotate(-45deg)) zu lösen . In diesem Fall können Sie -webkit-transform: translateZ(0px) rotateZ(-45deg)als Trick verwenden ( beachten Sie die Drehung Z ).

Z-Index : Zusammen mit der Rotation können Sie eine positive z-indexEigenschaft definieren , wie z z-index: 42. Die oben unter "Rotation" beschriebenen Schritte waren in meinem Fall ausreichend, um das Problem auch bei leerem zu beheben translateZ(0px). Ich vermute jedoch, dass der Z-Index in diesem Fall das Verschwinden und Wiederauftauchen überhaupt erst verursacht haben könnte . In jedem Fall muss die z-index: 42Immobilie erhalten bleiben - -webkit-transform: translateZ(42px)nur reicht nicht aus.

Dies ist ein sehr häufiges Problem, mit dem Entwickler konfrontiert sind, und das hauptsächlich auf die Safari'sEigenschaft zurückzuführen ist, Elemente, die als definiert sind, nicht neu zu erstellen position : fixed.

Ändern Sie also entweder die Positionseigenschaft oder es muss ein Hack angewendet werden, wie in anderen Antworten erwähnt.

Link1

Link2

In meinem Fall (einer iOS Phonegap-App) konnte das Problem durch Anwenden von translate3d auf relative untergeordnete Elemente nicht behoben werden. Mein scrollbares Element hatte keine festgelegte Höhe, da es absolut positioniert war und ich die oberen und unteren Positionen definierte. Was es für mich behoben hat, war das Hinzufügen einer Mindesthöhe (von 100px).

Ich hatte das gleiche Problem mit einer älteren Version von Fancybox. Ein Upgrade auf v3 löst Ihr Problem ODER Sie können einfach hinzufügen:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Ich habe dieses Problem in einem Framework7 & Cordova-Projekt festgestellt. Ich habe alle oben genannten Lösungen ausprobiert. Sie haben mein Problem nicht gelöst.

In meinem Fall habe ich mehr als 10 CSS-Animationen auf derselben Seite mit unendlicher Rotation (Transformation) verwendet. Ich musste die Animationen entfernen. Es ist jetzt in Ordnung, da einige visuelle Merkmale fehlen.

Wenn die oben genannten Lösungen Ihnen nicht helfen, können Sie einige Animationen entfernen.

Der -webkit-transform: translate3d(0, 0, 0);Trick hat bei mir nicht funktioniert. In meinem Fall hatte ich einen Elternteil eingestellt auf:

// parent
height: 100vh;

Ändern Sie das zu:

height: auto;
min-height: 100vh;

Das Problem wurde behoben, falls jemand anderes mit der gleichen Situation konfrontiert ist.

In meinem Fall hat CSS das Problem nicht behoben. Ich habe das Problem bei der Verwendung von jQuery festgestellt, bei dem eine Schaltfläche erneut gerendert wurde.

$("#myButton").html("text")

Versuche dies

$("#myButton").html("<span>text</span>")