javascript - 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 notification center on mobile phones. The way I chose was quite simple. I have a <div class="settings hide"> with this 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;
}

Now, this makes it look like so:

Now, the next step was to create it "slide-able" which I've done using jQuery, by adding class called "show".

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

And this actually made it great. It just worked! Suddenly I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my hipe was all gone.

Because it look like this:

Getting it so far? My menu did slide correctly, looks great in any browser, but here in Safari, it is hidden right behind the bar, so user actually can't close it.

I tried my best to solve this issue, butnothing really worked as I wanted.

PS: I assume you know that, but it kinda works when you use bottom: 0;, then it "knows" about the bar and stops correctly right above it. But because the setting is calculated with top position, it does not do the animation, which is necessary for my design.

Any help/solution appreciated!

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;
}