顶部的滑动菜单隐藏在Safari移动栏的后面 [英] Sliding menu from the top hides behind Safari mobile bar

问题描述

我在iOS Safari上的下拉菜单设置存在严重问题.想象一个网站，它的顶部有一个标题.如果单击标题，标题将向下滑动，就像移动电话上的任何通知中心一样.我选择的方式非常简单.我有一个<div class="settings hide">与此CSS:

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:

现在，下一步是通过添加名为"show"的类来创建我使用jQuery完成的可滑动".

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

这实际上使它变得很棒.它只是工作！突然，我在iPhone上尝试了该网站，由于底部栏一直显示，直到您滚动为止，我的臀部全都消失了.

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.

因为它看起来像这样:

到现在为止?我的菜单确实可以正确滑动，在任何浏览器中都很棒，但是在Safari中，它隐藏在栏的后面，因此用户实际上无法将其关闭.

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:我想您知道这一点，但是当您使用bottom: 0;时它可以工作，然后它知道"该条并正确地停在其上方.但是因为该设置是使用top位置计算的，所以它does not会进行动画，这对于我的设计是必需的.

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!

推荐答案

David，很遗憾，iOS Safari充满了令人不愉快的惊喜.

David, unfortunately iOS Safari is full of unpleasant surprises.

其中之一是iOS Safari认为的100vh.
iOS Safari中的视口高度与Chrome或Firefox中的窗口内部高度不相同.

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.

例如在iPhone 7plus 100vh == 696px上，但在window.innerHeight == 628px上.
在iPhone 6上100vh == 628px，但在window.innerHeight == 559px上.
等等...

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

因此解决方案摆脱了100vh.
假设body是.settings的偏移父级，请使用100%代替:

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

此外，您无需在.show类中使用calc(因为0vh === 0):

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

.show {
    top: -60px;
}

这篇关于顶部的滑动菜单隐藏在Safari移动栏的后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！