Sliding menu from the top hides behind Safari mobile bar

Question

I have a serious issue with my dropdown settings on iOS Safari. Imagine a website, which has a header on the top. If you click the header, it will slide down, just like any

Answer 1

David, unfortunately iOS Safari is full of unpleasant surprises.

One of them is what iOS Safari considers 100vh.
Viewport height in iOS Safari is not equal window inner height as in Chrome or Firefox.

E.g. on iPhone 7plus 100vh == 696px, but window.innerHeight == 628px.
On iPhone 6 100vh == 628px, but window.innerHeight == 559px.
And so on...

So the solution is getting rid of 100vh.
Assuming that body is offset parent of .settings use 100% instead:

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

.hide {
    top: -100%;
}

Also you do not need to use calc in your .show class (since 0vh === 0):

.show {
    top: -60px;
}