it-swarm.com.de

Durch das Scrollen in iPad Safari werden HTML-Elemente ausgeblendet und mit einer Verzögerung wieder angezeigt

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

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

Was ich jedoch sehe, ist, dass das Element nicht erscheint bis ich meinen Finger vom Bildschirm hebe und der Scroller alle seine Animationen beendet.

Dies ist ein sehr auffälliges Problem für mich, das alles abgehackt aussehen lässt, obwohl es nicht so ist. Ich vermute, dass das iPad Safari versucht, etwas zu tun, um Speicherplatz zu sparen. Gibt es eine Möglichkeit, diese Unruhe zu verhindern? Darüber hinaus wäre ich auch dankbar, wenn jemand Licht in das hineinbringen könnte, was die iPad Safari tatsächlich versucht.

157
codeBearer

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. Nach ungefähr 2,5 Jahren, in denen ich danach gefragt hatte und mir sagte, dass ich das Frage- und Antwortformat von SO missbrauche, sagte er mir auch, ich solle dies separat als Antwort posten. Hier ist also die vollständige Antwort, die mein Problem gelöst hat:

@Colin Williams, danke! Ihre Antwort und der Artikel, den Sie verlinkt haben, gaben mir die Möglichkeit, etwas mit CSS zu versuchen.

Also habe ich vorher translate3d benutzt. Es führte zu unerwünschten Ergebnissen. Grundsätzlich würde es Elemente abhacken und NICHT RENDERN, die sich außerhalb des Bildschirms befanden, 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 einen Fehler gemacht habe.

Das Anwenden von translate3d auf relativ positionierte Elemente löste das Problem für diese Elemente, aber andere Elemente hörten auf zu rendern, sobald sie sich außerhalb des Bildschirms befanden. Die Elemente, mit denen ich nicht interagieren konnte (Grafik), würden nie wieder gerendert, es sei denn, ich habe die Seite neu geladen.

Die Komplettlösung:

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

Nun, obwohl dies möglicherweise nicht die "effizienteste" Lösung ist, war es die einzige, die funktioniert. Mobile Safari rendert die Elemente, die bei Verwendung von -webkit-overflow-scrolling: touch Nicht auf dem Bildschirm angezeigt werden oder manchmal fehlerhaft dargestellt werden. Sofern translate3d nicht auf alle anderen Elemente angewendet wird, die aufgrund dieses Bildlaufs möglicherweise nicht auf dem Bildschirm angezeigt werden, werden diese Elemente nach dem Bildlauf abgeschnitten.

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

64
codeBearer

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

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

Dies ist insbesondere für untergeordnete Elemente erforderlich, die ein position:relative;-Deklaration (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.

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

177
Colin Williams

Das Targeting aller Elemente außer html: *:not(html) verursachte in meinem Fall Probleme bei anderen Elementen. Der Stapelkontext wurde geändert, sodass ein Z-Index unterbrochen wurde.

Wir sollten besser versuchen, auf das richtige Element abzuzielen und -webkit-transform: translate3d(0,0,0) nur darauf anwenden.

Bearbeiten: Manchmal funktioniert die Funktion translate3D(0,0,0) nicht. Wir können die folgende Methode anwenden, um auf das richtige Element abzuzielen:

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

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

Wenn 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

6
Fellipe Lima

Das statische Hinzufügen von -webkit-transform: translate3d(0,0,0) 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) für ein Element. Nach einer kurzen Verzögerung setze ich diese Eigenschaft zurück, d. H. -webkit-transform: none Dieser Ansatz scheint zu funktionieren.

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

2

Ich hatte das gleiche Problem mit Iscroll 4.2.5 auf iOS7. Das ganze Scrollelement verschwindet einfach. Ich habe versucht, translate3d(0,0,0) hinzuzufügen, wie hier vorgeschlagen, es hat das Problem gelöst, aber es hat den iscroll "snap" -Effekt deaktiviert. Die Lösung kam mit dem Geben von "position:relative; z-index:1000;display:block" css-Eigenschaften für den gesamten Container, der das Bildlaufelement enthält, und es ist nicht erforderlich, untergeordneten Elementen translate3d zuzuweisen.

1
yudarik

Dies ist ein sehr häufiges Problem, mit dem Entwickler konfrontiert sind. Dies liegt hauptsächlich an der Eigenschaft Safari's, Dass Elemente, die als position : fixed Definiert sind, nicht neu erstellt werden.

Ändern Sie also entweder die Positionseigenschaft oder wenden Sie einen Hack an, wie in den anderen Antworten angegeben.

Link1

Link2

0
arqam

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 über 10 CSS-Animationen auf derselben Seite mit unendlicher Drehung (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.

0
yavuzkirez

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 obere und untere Position definierte. Was es für mich reparierte, war das Hinzufügen einer minimalen Höhe (von 100px).

0
b4tch

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

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

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

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

Z index: Zusammen mit der Drehung können Sie eine positive z-index - Eigenschaft definieren, z. B. z-index: 42. Die oben unter "Rotation" beschriebenen Schritte reichten in meinem Fall aus, um das Problem auch mit der leeren Funktion translateZ(0px) zu beheben. Ich vermute allerdings, dass der Z-Index in diesem Fall das Verschwinden und das erneute Erscheinen in erster Linie verursacht haben könnte . In jedem Fall muss die Eigenschaft z-index: 42 Beibehalten werden - nur -webkit-transform: translateZ(42px) reicht nicht aus.

0
Stefan Zurfluh

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

overflow-y: auto;

(Vermutlich nur overflow: auto; würde je nach Bedarf auch funktionieren.)

0
David Notik

Zum Zeitpunkt translate3d funktioniert möglicherweise nicht, in diesen Fällen kann perspective verwendet werden

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