URL bar on Firefox mobile does not hide, despite 100% page height

I have a page with 100% height on body & HTML, and when it loads on Chrome Android, i can see the address bar, but i can swipe up and the bar hides. And the page shows the bottom part that was missing when the bar was visible.

On Firefox Android the address bar stubbornly remains fixed and does not want to hide. Of course it's pushing the page down, so part of the page on the bottom is not visible. It happens with the bar both in default mode (bottom) and with the bar at the top.

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

What could be the issue? And how should i fix this?

BTW, i'm using the Locomotive parallax JS script for horizontal scrolling, in case you wonder what the data inside the div tags is. It adds the following CSS:

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