[Bug] Dynamic Nav Bar leaves white space on certain websites

[serovar]

Steps to reproduce

Go to your feeds on feedbin.com and scroll down

Expected behavior

The bottom nav bar hides itself leaving way for the webpage content.

Actual behavior

The bottom nav bar hides itself but leaves a white space.

Device information

• Android device: Pixel 2 XL, Android 10
• Fenix version: Nightly 200226 (Build #20570605)

┆Issue is synchronized with this Jira Task

[erperejildo]

still facing the same issue. Can't see footer unless I scroll down

[xcjs]

I can confirm this is still an issue when the navigation bar is on the top. Web pages still render as if the bottom bar is present, especially if they have a "sticky footer". Firefox on Android is not calculating the viewport size correctly, and hasn't since the option to display the address bar on the bottom was released.

@sv-ohorvath What's needed to reopen this issue?

[thomasaarholt]

I too would like this issue reopened.

[TrissieTheHusky]

Same. I run IOS Firefox. My website has a white space at the bottom and me using Firefox a majority of the time. Really think this should be addressed/Fixed. Edit: I can confirm that it is not my css it is indeed Firefox mobile, it works fine on safari.

[hiikezoe]

I can confirm this is still an issue when the navigation bar is on the top. Web pages still render as if the bottom bar is present, especially if they have a "sticky footer". Firefox on Android is not calculating the viewport size correctly, and hasn't since the option to display the address bar on the bottom was released.

@sv-ohorvath What's needed to reopen this issue?

Opening a new issue with at least one site you can see the issue would be nice. A simple test case would be much appreciate. Thanks!

[oalfred]

I wanted to add here that I have the same problem when zooming in on an image, and it happens regardless of if the tool bar/address bar is at the top or at the bottom.

Steps to reproduce:

• View an image in Firefox on Android, for example https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png.
• Zoom in until the image covers the entire screen.
• Scroll up and down a bit

Screenshot, note the white area above the touch controls:

[adrianvincent91]

After some debugging, this problem seems to occur when 'overflow: hidden' is added to document.body. As a temporary fix, I'm adding an alternative class to the body when I detect Firefox Android.

body.overflowHiddenFirefoxMobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}

[greddyz]

I`m fixed it for Firefox Android add rule "top:100%"

.nav { position: fixed; top: 100%; left: 0; right: 0; bottom: 0; }