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

Ich baue ein Webportal, das auf mehreren Plattformen funktional 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. Das funktioniert alles 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 Kompaktansicht von Mobile Safari zur Vollansicht und meine Schaltflächen sind hinter der unteren Navigationsleiste verborgen!

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 auf dem IOS-Simulator: Beispiel
Wie Sie sehen, 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 weist keine Fehler auf.

Wenn Sie Ihr Code-Snippet auflisten, kennzeichnen Sie dies und wir können zum Stapelüberlauf migrieren ...
Ich habe einen Fehler für Safari erstellt, bitte kommentieren Sie dort: bugs.webkit.org/show_bug.cgi?id=194235
Das hat noch keiner behoben?

Antworten (2)

Dies ist ein normales Verhalten in Mobile Safari. Wenn Sie unten auf tippen, werden die verschiedenen Browseroptionen angezeigt und die Webseite entsprechend nach oben gescrollt. Die Funktionalität der Webseite bleibt jedoch gleich, sodass der Benutzer nach dem Scrollen immer noch auf die Schaltfläche tippen kann, um auf die jeweilige Funktionalität zuzugreifen.

Danke Patrix, ich weiß, das ist normal, aber gibt es eine Möglichkeit, dieses Verhalten über HTML, CSS oder JS zu überschreiben? Ich habe diese Frage bereits zum Stapelüberlauf gepostet, aber da es sich um etwas mit Apple handelt, wird Ask-Andere vielleicht einen Weg kennen
StackOverflow (oder sogar eine SE-Site, auf der sich Webentwickler aufhalten) ist für solche Dinge besser geeignet als AD (das sich auf Endbenutzerprobleme konzentriert). Da der Zugriff auf die Browsersteuerung für den Benutzer irgendwie unerlässlich ist, bezweifle ich jedoch, dass es eine Möglichkeit gibt, das Verhalten zu vermeiden.
Link zu den Fragen und Antworten zum Stapelüberlauf?
Was ist die tatsächliche Größe davon in Pixeln? Kann es nirgendwo finden ... 56px ist nicht genug. Wie heißt diese „tote Zone“?

Ich glaube, ich habe vielleicht eine Antwort gefunden. Festlegen Ihrer Inhalte mit den folgenden Stilen:

  • height: 100%(ermöglicht Inhalten, das Ansichtsfenster zu füllen und über den unteren Rand hinauszugehen)
  • overflow-y: scroll(ermöglicht es Ihnen, unter das Ansichtsfenster zu scrollen; der Standardwert ist visible)
  • -webkit-overflow-scrolling: touch(um das Scrollverhalten zu glätten)

scheint zu erzwingen, dass das iOS-Menü in Safari immer angezeigt wird. Auf diese Weise funktionieren Schaltflächenklicks tatsächlich, anstatt das Safari-Menü zu öffnen. Hoffe das hilft!

Sicher, das funktioniert, aber nicht alle Websites können die Einstellung overflow-y: scrollin ihrem Hauptinhaltsbereich tolerieren. Dieser Hack hat Nebenwirkungen, die sich auf alle untergeordneten Elemente auswirken. Um es richtiger auszudrücken, diese CSS-Eigenschaften wirken sich direkt auf alle untergeordneten Elemente aus, und das Erzwingen der Anzeige des Safari-Menüs ist eigentlich der Nebeneffekt.
Vielen Dank. Ich habe noch nicht versucht, auf den unteren Rand des Bildschirms zu tippen, aber mindestens 10 % meines Designs werden nicht von Safaris widerlicher Menüleiste verdeckt. Darüber hinaus müssen Sie auch jedes enthaltende Element height: 100%angeben. Für ein Unternehmen, das viel Geld mit mobilen Geräten verdient, ist die mobile Web-Erfahrung schrecklich.
@corysimmons Wie wir bei WebRTC gesehen haben und immer noch bei Push API sehen , versucht Apple, Entwickler dazu zu bringen, eine native App zu erstellen, wenn Sie deutlich mehr wollen, als nur eine einfache Seite anzuzeigen.
Safari IOS-Menüleiste kollidiert mit Schaltflächen in den unteren 10 % des Bildschirms
AntwortenHierDatenschutz-Bestimmungen1y, 0v