从顶部滑动菜单隐藏在Safari移动栏后面

iOS Safari上的下拉设置有一个严重的问题。 设想一个网站，顶部有一个标题。 如果您点击标题，它将滑落，就像手机上的任何通知中心一样。 我select的方式很简单。 我有一个<div class="settings hide">与此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; } 

现在，这看起来像这样：

现在，下一步是通过添加名为“show”的类来创build“使用jQuery完成的可滑动”。

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

这实际上使它变得很棒。 它只是工作！ 突然间，我尝试了iPhone上的网站，因为底部的栏杆，一直显示，直到滚动，我的臀部全部消失了。

因为它看起来像这样：

到目前为止？ 我的菜单没有滑动，在任何浏览器中看起来都很棒，但是在Safari中，它隐藏在酒吧后面，所以用户实际上无法closures它。

我尽我所能来解决这个问题，但没有真正按我的意思工作。

PS：我假设你知道这一点，但是当你使用bottom: 0;时bottom: 0; ，那么它“知道”吧，并正确地停在它的正上方。 但是因为设置是以top位置计算的，所以does not进行我devise所需的animation。

任何帮助/解决scheme赞赏！

Answer 1

大卫，不幸的是iOS Safari充满了令人不快的惊喜。

其中之一是iOS Safari认为100vh 。
iOS Safari中的视口高度不等于Chrome或Firefox中的窗口内部高度 。

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

所以解决scheme是摆脱100vh 。
假设body是.settings抵消父母，则使用100%代替：

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

你也不需要在.show类中使用calc （自0vh === 0）：

 .show { top: -60px; }