HTML/CSS - Div 覆盖 CSS Firefox for Android 与 Firefox for iOS 的区别答案

【问题标题】：HTML/CSS - Div overlay CSS Firefox for Android vs Firefox for iOS differencesHTML/CSS - Div 覆盖 CSS Firefox for Android 与 Firefox for iOS 的区别
【发布时间】：2021-08-12 06:33:02
【问题描述】：

我的网页上有一个滑出式菜单。在 Firefox for iOS 中，它可以工作并且看起来很正常。

在 Firefox for Android 中，它不起作用。

为什么 Firefox for Android 的行为不同？如何更正它使其看起来像 iOS？

这里先是 iOS 屏幕截图，然后是 Android 屏幕截图。代码在屏幕截图下方。

这里是菜单的 HTML 和 CSS

'meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"'

<div id="slideOutMenu">
    <span>X</span>
    <span>Home</span>
    <span>Preferences</span>
    <span>About</span>
    <span>Legal</span>
    <span>Contact</span>
</div>

#slideOutMenu {
    right: 0 !important;
    transform: translate3d(0px, 0px, 0px) !important;
    transition: transform .381s ease-in-out 0s !important;
    width: 221px;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: auto;
    z-index: 200;
    background: #3f3f3f;
    box-shadow: -1px 0 1px rgba(0,0,0,0.29034);
    z-index: 1111;
    overflow-y: auto;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

【问题讨论】：

Firefox for iOS 使用 WebKit，而 Android 使用 Gecko。它们是两个不同的渲染引擎，这就是它如此不同的原因。我的预感是-webkit-fill-available 可能会覆盖 100vh，但在 Gecko 中也不是有效值。
好的，非常有趣而且非常有帮助。我应该为 Gecko 使用什么来使滑出菜单的高度填充 100% 的屏幕？
100vh 是视口高度的 100%。我不知道你为什么有另一个 -webkit-fill-available 条目。有什么特别的原因吗？您可以删除该行。
我添加了 -webkit-fill-available 来解决 iOS 移动版 Safari 的问题。 100vh 在 Safari 中不起作用并导致问题。
我会尝试完全删除 min-height 属性

标签： javascript html css firefox

【解决方案1】：

添加min-height: -moz-available; 修复它。

【讨论】：