The sliding menu from above is hidden behind the mobile Safari bar
I have a serious problem with my dropdown settings on iOS Safari. Imagine a website with a title at the top. If you click on a title, it will slide down, just like any notification center on mobile phones. The way I chose was pretty simple. I have <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;
}
It now looks like this:
Now the next step was to create a "slide feature" which I did with jQuery by adding a class called "show".
.show{
top: calc(0vh - 60px);
}
And this is really great. It just worked! All of a sudden I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my run all disappeared.
Because it looks like this:
How to do it? My menu did indeed render correctly, looks great in any browser, but here in Safari it is hidden right behind the panel, so the user cannot actually close it.
I tried my best to fix this issue but didn't work as I hoped.
PS: I assume you know this, but it works when you use it bottom: 0;
, then it "knows" about the bar and stops correctly right above it. But since the setting is calculated using position top
, it does not
does the animation I need for my design.
Any help / solution is appreciated!
source to share
David, unfortunately, iOS Safari is full of nasty surprises.
One of them is what iOS Safari thinks 100vh
.
The viewport height in iOS Safari is not equal to the inner window height as in Chrome or Firefox.
eg. on iPhone 7plus 100vh == 696px
, but window.innerHeight == 628px
.
On iPhone 6 100vh == 628px
, but window.innerHeight == 559px
.
Etc...
So the solution gets rid of 100vh
.
Assuming it body
is the offset parent .settings
, use 100%
instead:
.settings {
position: fixed;
width: 100%;
height: calc(100% + 60px);
...
}
.hide {
top: -100%;
}
Also you don't need to use calc
in your class .show
(starting from 0vh === 0):
.show {
top: -60px;
}
source to share