pasek menu safari IOS powoduje konflikt z przyciskami w dolnej 10% ekranu

14

Buduję portal internetowy, który musi być funkcjonalny i ładny na wielu platformach. Jedną z platform jest IOS Safari i właśnie tam napotkałem problem. W moim kodzie wyrównuję dwa pływające przyciski do dolnej części div o szerokości i wysokości 100%. To wszystko działa dobrze, a moje przyciski wyświetlają się dokładnie tak, jak powinny na dole strony. Jednak po kliknięciu przycisków kompaktowy widok z mobilnego safari przełącza się na pełny widok, a moje przyciski są ukryte za dolnym paskiem nawigacyjnym!

Czy normalne zachowanie Safari mobile pokazuje wyświetlanie rozszerzonego menu, gdy użytkownik stuka w dolne 10% ekranu? Jak mogę tego uniknąć?

W tym gifie możesz zobaczyć problem na symulatorze IOS: przykład
Jak widać, problem występuje tylko wtedy, gdy przycisk znajduje się w dolnej 10% widoku. To tylko zwykły przycisk. Mój kod został potrójnie sprawdzony przez kilku programistów i nie zawiera błędów.

ios safari development html dennismuijs
źródło
Jeśli podasz fragment kodu, oflaguj go, a my możemy migrować do przepełnienia stosu ...
bmike
Stworzyłem błąd dla Safari, proszę tam skomentować: bugs.webkit.org/show_bug.cgi?id=194235
sheerun

Odpowiedzi:

5

Jest to normalne zachowanie w Mobile Safari, stuknięcie u dołu wyświetli różne opcje przeglądarki i odpowiednio przewinie stronę w górę. Funkcjonalność strony internetowej pozostaje jednak taka sama, więc użytkownik może nadal przewijać przycisk po przewinięciu, aby uzyskać dostęp do dowolnej funkcji, którą posiada.

nohillside
źródło
4
Dzięki Patrix, wiem, że to normalne, ale czy istnieje sposób na obejście tego zachowania przez HTML, CSS lub JS?
Zadałem
1
StackOverflow (lub nawet witryna SE, na której spotykają się programiści) jest lepsza do tego rodzaju rzeczy niż AD (która koncentruje się na problemach użytkowników końcowych). Ponieważ dostęp do elementów sterujących przeglądarki jest w jakiś sposób niezbędny dla użytkownika, wątpię, czy istnieje sposób na uniknięcie takiego zachowania.
nohillside
link do przepełnienia stosu pytania i odpowiedzi?
Ben Roberts
7

Myślę, że mogłem znaleźć odpowiedź. Ustawienie zawartości w następujący sposób:

  • height: 100% (pozwala zawartości wypełnić obszar ekranu i wyjść poza dno)
  • overflow-y: scroll(umożliwia przewijanie poniżej okienka ekranu; wartością domyślną jest visible)
  • -webkit-overflow-scrolling: touch (aby wygładzić dowolne zachowanie przewijania)

wydaje się wymuszać zawsze wyświetlanie menu iOS w Safari. W ten sposób kliknięcia przycisków będą faktycznie działać zamiast otwierać menu Safari. Mam nadzieję że to pomoże!

jennz0r
źródło
Jasne, to działa, ale nie wszystkie witryny mogą tolerować ustawienia overflow-y: scrollw głównym obszarze zawartości. Ten hack ma skutki uboczne, które wpłyną na wszystkie jego elementy potomne. Mówiąc dokładniej, te właściwości css bezpośrednio wpływają na wszystkie elementy potomne, a zmuszanie menu safari do wyświetlenia jest faktycznie efektem ubocznym.
zevdg
Dzięki. Nie próbowałem jeszcze dotknąć dolnej części ekranu, ale co najmniej 10% mojego projektu nie jest zakrywane przez nieznośny pasek menu Safari. Aby dodać do tego, musisz podać również każdy zawierający element height: 100%. Dla firmy, która zarabia dużo pieniędzy na urządzeniach mobilnych, korzystanie z internetu mobilnego jest straszne.
corysimmons