Die Safari IOS-Menüleiste steht in Konflikt mit den Schaltflächen in den unteren 10% des Bildschirms

14

Ich baue ein Webportal auf, das auf mehreren Plattformen funktionsfähig und hübsch sein muss. Eine der Plattformen ist IOS Safari, und hier bin ich auf ein Problem gestoßen. In meinem Code richte ich zwei schwebende Schaltflächen am unteren Rand eines Div mit einer Breite und Höhe von 100% aus. Dies alles funktioniert einwandfrei und meine Schaltflächen werden genau so angezeigt, wie sie am unteren Rand der Seite angezeigt werden sollen. Wenn ich jedoch auf die Schaltflächen klicke, wechselt die kompakte Ansicht von der mobilen Safari zur Vollansicht und meine Schaltflächen sind hinter der unteren Navigationsleiste versteckt!

Ist es normal, dass Safari Mobile das erweiterte Menü anzeigt, wenn der Benutzer auf die unteren 10% des Bildschirms tippt? Wie kann ich das vermeiden?

In diesem GIF sehen Sie das Problem im IOS-Simulator: Beispiel
Wie Sie sehen können, tritt das Problem nur auf, wenn sich eine Schaltfläche in den unteren 10% der Ansicht befindet. Dies ist nur eine normale Schaltfläche. Mein Code wurde von mehreren Entwicklern dreifach überprüft und enthält keine Fehler.

ios safari development html dennismuijs
quelle
Wenn Sie Ihr Code-Snippet
auflisten, markieren Sie
Ich habe einen Fehler für Safari erstellt, bitte kommentieren Sie dort: bugs.webkit.org/show_bug.cgi?id=194235
Sheerun

Antworten:

5

Dies ist in Mobile Safari normal. Wenn Sie unten auf tippen, werden die verschiedenen Browseroptionen angezeigt und die Webseite entsprechend nach oben gescrollt. Die Webseitenfunktionalität bleibt jedoch unverändert, sodass der Benutzer nach dem Scrollen weiterhin auf die Schaltfläche tippen kann, um auf die vorhandenen Funktionen zuzugreifen.

nohillside
quelle
4
Danke Patrix, ich weiß, dass dies normal ist, aber gibt es eine Möglichkeit, dieses Verhalten durch HTML, CSS oder JS zu überschreiben? Ich habe diese Frage bereits auf Stapelüberlauf gepostet, aber da es sich um etwas handelt, das mit Apfel zu
tun hat,
1
StackOverflow (oder sogar eine SE-Site, auf der sich Webentwickler aufhalten) ist für diese Art von Dingen besser als AD (das sich auf Endbenutzerprobleme konzentriert). Da der Zugriff auf Browser-Steuerelemente für den Benutzer irgendwie wichtig ist, bezweifle ich, dass es eine Möglichkeit gibt, das Verhalten zu vermeiden.
Nohillside
Link zum Stapelüberlauf Fragen und Antworten dazu?
Ben Roberts
7

Ich glaube, ich habe vielleicht eine Antwort gefunden. Stellen Sie Ihren Inhalt auf die folgenden Stile ein:

  • height: 100% (Ermöglicht es Inhalten, das Ansichtsfenster zu füllen und über den unteren Bereich hinauszugehen.)
  • overflow-y: scroll(Ermöglicht das Scrollen unter dem Ansichtsfenster; der Standardwert ist visible)
  • -webkit-overflow-scrolling: touch (um das Bildlaufverhalten zu glätten)

wird angezeigt, um das iOS-Menü in Safari zu zwingen, immer angezeigt zu werden. Auf diese Weise funktionieren Tastenklicks tatsächlich, anstatt das Safari-Menü zu öffnen. Hoffe das hilft!

jennz0r
quelle
Sicher, das funktioniert, aber nicht alle Websites können Einstellungen overflow-y: scrollin ihrem Hauptinhaltsbereich tolerieren . Dieser Hack hat Nebenwirkungen, die sich auf alle untergeordneten Elemente auswirken. Genauer gesagt wirken sich diese CSS-Eigenschaften direkt auf alle untergeordneten Elemente aus, und das Anzeigen des Safari-Menüs ist eigentlich der Nebeneffekt.
Zevdg
Vielen Dank. Ich habe noch nicht versucht, auf den unteren Bildschirmrand zu tippen, aber mindestens 10% meines Designs werden nicht von Safaris widerlicher Menüleiste verdeckt. Um dies hinzuzufügen, müssen Sie auch jedes enthaltende Element height: 100%angeben. Für ein Unternehmen, das viel Geld mit mobilen Geräten verdient, ist das mobile Web-Erlebnis schrecklich.
Corysimmons