IOS -webkit-overflow-scrolling scrollt auf falscher Achse oder gar nicht

8

Ich baue eine mobile App für IOS mit html5. Ich benutze "-webkit-overflow-scrolling: touch", um das native Trägheitsscrolling zu erhalten, aber es ist sehr fehlerhaft. Ich habe die Probleme gelöst, bei denen Inhalt erst beim Scrollen angezeigt wird, aber ein andauernder Fehler ist der:

Beim Scrollen nach oben und unten passiert nichts, aber wenn ich horizontal scrollen möchte, scrollt der Inhalt vertikal (90 Grad von der Achse entfernt). Wenn ich in meiner App navigiere und zur Seite zurückkehre, wird sie manchmal repariert. Manchmal scrollt es überhaupt nicht, obwohl es voller Inhalt ist.

Aus dem, was ich gegoogelt habe, scheint der Konsens zu sein, dass Apple sich dieses Problems bewusst ist und nicht die Absicht hat, es in absehbarer Zeit zu beheben. Hat jemand eine Lösung gefunden, um -webkit-overflow-scrolling richtig funktionieren zu lassen?

    
doubledriscoll 06.09.2012, 20:58
quelle

3 Antworten

6

Ich habe mich auch monatelang mit diesem Virus herumgeschlagen. Die beste Charakterisierung, die ich gefunden habe, ist:

Ссылка

sagt, dass es passiert, wenn die Seite einen iFrame hat und der Inhalt von Javascript gesetzt wird. Meine aktuelle Problemumgehung in Der Grafik-Codex Version 1.6 besteht darin, iScroll4 zu verwenden, um explizit die Seite zu scrollen, anstatt das Scrollen per Berührung zu verwenden. Da Javascript single-threaded ist, kann dies langsam sein, wenn Sie auch Animationen ausführen oder Inhalte im Hintergrund laden.

    
user1615357 11.11.2012, 03:00
quelle
2

Ich habe das gleiche Problem festgestellt: Ein Knoten, der -webkit-overflow-scrolling: scroll verwendet und nur mit einer Scroll-Geste nach links / rechts blättern würde.

Hier ist, was ich als mögliche Ursachen gefunden habe:

  • iframe ist überall auf der Seite vorhanden, sichtbar oder anderweitig ( Quelle ) )
  • visibility: hidden wird auf alle übergeordneten Elemente des scrollbaren Knotens angewendet ( Quelle )

Allerdings war keine dieser Situationen in meiner Web-App vorhanden. Ich hatte einen scrollbaren <ul> in einem reinen CSS modalen Dialog, den ich schrieb, der einen cleveren Trick benutzte, um eine transparente Unterlage hinzuzufügen - ein ::after Pseudo-Element mit position: fixed .

Als ich die position: fixed aus dem Pseudo-Element entfernte, ging das Problem weg! Natürlich machte dies meinen cleveren Trick nutzlos, aber es war interessant zu erfahren, dass dieser Fehler durch diese Situation ausgelöst werden konnte.

Gerät: iOS 5.1.1 auf 2012 iPad 3 (Retina)

Beleidigender Code:

%Vor%

tl; dr: Wenn Elemente, die Elemente enthalten, ein Pseudopositionselement mit fester Position haben, kann das Entfernen dieses Problems Ihr Bildlaufproblem beheben.

    
lazd 15.11.2012 03:30
quelle
0

Ich weiß, dass das Problem etwas alt ist, aber ich musste meine Website mit iOS 5 arbeiten lassen. Leider konnte ich den iframe nicht entfernen oder ersetzen. Ich habe bemerkt, dass das Vorhandensein von iframe das Problem nur dann verursachte, wenn es vor dem Element gerendert wurde, das glatt scrollen sollte. Ein späteres Anfügen von iframe an das Dokument (nach dem Element mit -webkit-overflow-scrolling: touch) behob das Problem:)

    
kaapa 23.11.2013 21:36
quelle

Tags und Links