Schiebe-Menü von oben verbirgt sich hinter Safari mobile bar

Question

Ich habe ein ernstes Problem mit meinen Dropdown-Einstellungen auf iOS Safari. Stellen Sie sich eine Website vor, die oben eine Kopfzeile hat. Wenn Sie auf die Kopfzeile klicken, wird sie wie jedes Benachrichtigungscenter auf Mobiltelefonen nach unten verschoben. Die Art, wie ich mich entschied, war ziemlich einfach. Ich habe ein <div class="settings hide"> mit diesem CSS:

.settings{ 
    position: fixed; 
    width: 100%; 
    height: calc(100vh + 60px); 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    z-index: 10; 
} 

.hide{ 
    top: -100vh; 
} 

Nun, dies macht es wie so aussehen:

Nun ist der nächste Schritt, es zu schaffen war "slide-able", die ich Ich habe jQuery gemacht, indem ich die Klasse "show" hinzugefügt habe.

.show{ 
    top: calc(0vh - 60px); 
} 

Und das machte es wirklich großartig. Es hat einfach funktioniert! Plötzlich versuchte ich die Website auf meinem iPhone, und wegen der unteren Leiste, die immer angezeigt wird, bis Sie scrollen, war mein hipe alles weg.

Weil es so aussehen:

es bisher bekommen? Mein Menü ist korrekt gelaufen, sieht in jedem Browser gut aus, aber hier in Safari ist es direkt hinter der Leiste versteckt, so dass der Benutzer es nicht schließen kann.

Ich versuchte mein Bestes, um dieses Problem zu lösen, aber nichts funktionierte wirklich so, wie ich wollte.

PS: Ich nehme an, Sie wissen das, aber es funktioniert ein bisschen, wenn Sie bottom: 0; verwenden, dann "weiß" es über die Leiste und stoppt richtig darüber. Aber weil die Einstellung mit top Position berechnet wird, es does not tun die Animation, die für mein Design notwendig ist.

Jede Hilfe/Lösung geschätzt!

Answer 1

David, leider ist iOS Safari voller böser Überraschungen.

Eine davon ist, was iOS Safari 100vh betrachtet.
Viewport Höhe in iOS Safari ist nicht gleich Fenster innere Höhe wie in Chrome oder Firefox.

z. auf dem iPhone 7plus 100vh == 696px, aber window.innerHeight == 628px.
Auf iPhone 6 , aber window.innerHeight == 559px.
Und so weiter ...

So ist die Lösung loswerden 100vh.
Unter der Annahme, dass body versetzt Elternteil .settings Verwendung 100% statt:

.settings { 
    position: fixed; 
    width: 100%; 
    height: calc(100% + 60px); 
    ... 
} 

.hide { 
    top: -100%; 
} 

Auch brauchen Sie nicht calc in Ihrer .show Klasse zu verwenden (da 0vh === 0):

.show { 
    top: -60px; 
}