javascript - 顶部的滑动菜单隐藏在 Safari 移动栏后面

Question

我在 iOS Safari 上的下拉设置有一个严重的问题。想象一个网站，顶部有一个标题。如果你点击标题，它会向下滑动，就像手机上的任何通知中心一样。我选择的方式很简单。我有一个 <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”的类来创建它“可滑动”，这是我使用 jQuery 完成的。

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

这实际上让它变得很棒。它刚刚起作用!突然我在我的 iPhone 上尝试了这个网站，由于底部栏一直显示直到你滚动，我的臀部都不见了。

因为它看起来像这样:

到此为止了吗？我的菜单确实可以正确滑动，在任何浏览器中看起来都很棒，但在 Safari 中，它隐藏在栏的正后方，因此用户实际上无法关闭它。

我尽力解决了这个问题，但没有任何效果如我所愿。

PS:我假设你知道，但是当你使用 bottom: 0; 时它有点管用。 , 然后它“知道”酒吧并正确地停在它的正上方。但是因为设置是用top计算的位置，它does not做动画，这对我的设计来说是必要的。

感谢任何帮助/解决方案!

Answer 1

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

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

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

所以解决方案是摆脱 100vh。
假设 body 是 .settings 的偏移父级，请改用 100%:

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

.hide {
    top: -100%;
}

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

.show {
    top: -60px;
}