Visualviewport API unter iOS 13

Hallo,

ich habe gesehen, dass Discourse irgendwie die obere Position der virtuellen Tastatur auf iOS berechnet hat. Das ist wichtig, wenn man etwas direkt über der virtuellen Tastatur platzieren möchte, wie dieses Eingabefeld, in das ich gerade tippe.

Auf Android-Geräten mit Browser ist dies kein Problem, da Elemente mit position: fixed automatisch nach oben geschoben werden, sobald die visuelle Tastatur sichtbar wird.

Die Workaround-Lösung für iOS besteht darin, die VisualViewport-API zu verwenden https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API. Das einzige Problem ist, dass es keine Unterstützung für Geräte vor iOS 13 gibt …

Ich habe dasselbe Eingabefeld auf einem Gerät mit iOS 12.1 getestet, und anscheinend hat Discourse das gewünschte Verhalten auch auf nicht unterstützten iOS-Safari-Versionen nachgebildet.

Könnte mich jemand in die richtige Richtung weisen, um dasselbe Ergebnis zu erzielen? Das würde ich sehr zu schätzen wissen :smiley:

Mit freundlichen Grüßen,
Wouter Vermeersch

Ich erinnere mich, dass @sam das als „Berg an Hacks

2 „Gefällt mir“

Ich kann mir vorstellen, dass das ein Berg von Workarounds ist. Ich kopfe schon seit Tagen über dieses Problem, also bin ich bereit und willig, diesen Berg mit Vergnügen zu erklimmen :grinning: ..

Ich musste bereits einen ziemlich schmutzigen Workaround implementieren, um zu verhindern, dass Mobile Safari die obere feste Leiste hochschiebt, wenn man ein Eingabefeld fokussiert. Eigentlich denke ich, wird es nicht viel schlimmer sein als das, was ich dort tun musste, um das zu erreichen :stuck_out_tongue_closed_eyes:

2 „Gefällt mir“

Der schreckliche Hack bestand darin, beim Fokusgewinn des Textfelds Elemente aus ihrer Position zu reißen und alles auf der Seite auszublenden. Anschließend wurde es wiederhergestellt, sobald das Textfeld den Fokus verlor.

Es war sehr eigenartig. Wie froh ich bin, dass @pmusaraj eine weitaus robustere Implementierung vorgestellt hat.

5 „Gefällt mir“

Der relevante Code für beide Lösungen befindet sich hier: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js

Wie in dieser Datei jedoch erwähnt, werden wir die iOS-12-Hacks bald entfernen. iOS 14 ist dieses Jahr erschienen, und nur etwa 5 % der Geräte verwenden noch iOS 12.

4 „Gefällt mir“

Danke für den Beitrag! :smiley:

Ich habe mir deine Workaround kurz angesehen. Bist du dabei wirklich den Weg gegangen, die Größen aller möglichen Tastaturgrößen hardcodiert festzulegen?

Wenn sie jedoch die automatische Vorschlagsfunktion deaktivieren, ändert sich die Tastaturgröße. Wie gehst du damit um?

Ich wusste nicht, dass die Nutzergruppe mit iOS 12 so klein ist. Bist du dir sicher, dass nur noch 5 % bei iOS 12 und niedriger bleiben? In diesem Fall könnte es Zeitverschwendung sein, sich auf dieses spezielle Problem zu konzentrieren.

Ich habe es auf dem iPhone 6 mit iOS 2.14 geprüft.

Der Workaround funktioniert einwandfrei, wenn die automatische Vorschlagserstellung aktiviert ist … wenn die automatische Vorschlagserstellung deaktiviert ist, bleibt eine Lücke … aber wie du bereits festgestellt hast, ist die Anzahl der Nutzer, die noch auf iOS 12 feststecken, so gering … Noch geringer ist die Zahl der Nutzer, die auf iOS 12 feststecken und die automatische Vorschlagserstellung deaktiviert haben.

Deine Lösung ist also die beste, die ich mir vorstellen kann. Danke fürs Teilen! :wink:

Ich weiß nicht, ob es offizielle Zahlen gibt, aber diese Grafik von Mixpanel zeigt, dass iOS 12 und älter bei 7 % liegen.

Ich stimme dir sehr zu, dass es sich nicht lohnt, deine Mühe auf eine Korrektur dafür für iOS 12 zu verwenden.

3 „Gefällt mir“