尽管页面高度为 100%，但 Firefox Mobile 上的 URL 栏不会隐藏答案

【问题标题】：URL bar on Firefox mobile does not hide, despite 100% page height尽管页面高度为 100%，但 Firefox Mobile 上的 URL 栏不会隐藏
【发布时间】：2022-12-11 06:38:24
【问题描述】：

我有一个页面的正文和 HTML 高度为 100%，当它在 Chrome Android 上加载时，我可以看到地址栏，但我可以向上滑动，地址栏会隐藏。该页面显示了栏可见时缺失的底部。

在 Firefox Android 上，地址栏固执地保持固定并且不想隐藏。当然它会将页面向下推，所以页面底部的部分内容是不可见的。它发生在默认模式（底部）和顶部的栏中。

HTML:

<body>
    <div data-scroll-container class="wrapper">
        <div data-scroll-section class="bg">                
            <div data-scroll data-scroll-sticky id="navigation"></div>
            <div data-scroll data-scroll-direction="vertical" data-scroll-speed="-1" class="elements moon"></div>
        </div>
    </div>
</body>

CSS：

html,body {
    height: 100%;
}

.bg {
    width: 200vw;
    height: 100%;
    background: url(../img/sky.jpg) center/cover no-repeat;
    position: relative;
}

.elements {
    position: absolute;
}

#navigation {
    background: url(../img/navigation.png) center left / contain no-repeat;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
}

.moon {
    background: url(../img/moon.png) no-repeat;
    height: 300px;
    width: 300px;
    top: -5%;
    left: 700px;
    mix-blend-mode: screen;
}

可能是什么问题？我应该如何解决这个问题？

顺便说一句，我正在使用 Locomotive 视差 JS 脚本进行水平滚动，以防您想知道 div 标签中的数据是什么。它添加了以下 CSS：

body {
    overflow: hidden;
}
.wrapper {
    height: 100vh;
    display: inline-block;
    white-space: nowrap;
    min-height: 100vh;
}

【问题讨论】：

标签： html css firefox mobile

【解决方案1】：

你有没有解决这个问题？我正面临这个确切的问题。我尝试在移动设备上查看 youtube 的代码，因为它确实隐藏了他们的网站，而且他们没有专门为 firefox 做任何事情，所以我迷路了。

抱歉，这不是答案。我没有足够的积分来发表评论。

【讨论】：