[Bug] Non-scrollable pages: Bottom toolbar stays hidden, no access to tabs menu

[LeoniePhiline]

Steps to reproduce

1. Nightly 200329.
2. Have bottom toolbar activated.
3. Open a private tab.
4. Navigate to an Instagram profile https://www.instagram.com/anna_zoya_coaching/ , not logged in at the site.
5. Surf the profile's posts (keep scrolling down so the bottom toolbar is hidden when the login overlay pops up) until Instagram shows its "log in to continue" overlay and disables scrolling (after viewing 5-6 posts).
6. Try scrolling to access the "open tabs" menu.
7. Try back btn / swipe from screen edge gesture.

Expected behavior

1. Bottom toolbar appears no matter if the page itself is scrollable.

Actual behavior

1. Bottom toolbar does not appear, because scrolling is disables by the webpage - tab cannot be closed.
2. Back button fails you because Instagram does not remove the overlay even on back navigation (using history API, and excluding the login overlay from affected components). Reloading would help, but you can't because of the hidden toolbar.

So in effect you're stuck with a full screen browser tab and no way to close it.

A webpage must not be able to dictate the browser's UI state! (by body { overflow: hidden; })

Since in this case it's a private tab, you might be able to close all tabs via the Android notification, and lose all other private tabs you had open.

Device information

• Android device: Huawei P20
• Fenix version: 200329 Nightly

┆Issue is synchronized with this Jira Task

[LeoniePhiline]

Another example:

Do this search: https://duckduckgo.com/?q=dasfoersters&t=fpas&ia=web

Scroll down a little to make the bottom toolbar disappear.

click the first item (leading to https://das-foersters.de/)

You can go back but you cannot close the tab. If your Android OS uses only the back drag-from-screen-edge gesture then you have no visually indicated way to get out.

[Scripterr]

related issue https://github.com/mozilla-mobile/fenix/issues/9482 /CCing @sblatz because he working on dynamic bottom bar and recently committed https://github.com/mozilla-mobile/android-components/pull/6244 ,which is causing weird scroll behavior on almost all the sites.

[sblatz]

@snorp do you have any suggestions here? Sounds like lots of sites are handling these touch events differently.

My guess is that adding the forceExpand behavior on navigation would fix this, but maybe you'd have a different takeaway here?

[snorp]

@sblatz Yup, I agree, that should fix it.

[sblatz]

I'll keep an eye on this, but it should be fixed in a day or two once my AC PR gets merged and I can follow up with a Fenix fix 😄

https://github.com/mozilla-mobile/android-components/pull/6431

[sblatz]

Should be fixed now that my forceExpand change is in. QA please verify (should be same STR from https://github.com/mozilla-mobile/fenix/issues/9472)

[Scripterr]

Hello @sblatz I'm having this problem with toolbar behaviour inconsistently while scrolling on GitHub pages in general but you can consistently see it in pull request pages https://github.com/mozilla-mobile/fenix/pulls . The issue is that when you load page and start scrolling the page slowly you will see that bottom bar don't hide automatically and if you would start scrolling up-down bottom bar behaves uneven and don't hide-unhide consistently.

There is also another issue on the GitHub project pages, for example open this page https://github.com/mozilla-mobile/fenix/projects/40#column-8533259 the bottom bar doesn't hides at all and the content at the bottom of page get hidden. screenshot-

[abodea]

Hi, @Scripterr I checked this issue on Nightly 4/1 on the https://github.com/mozilla-mobile/fenix/projects/40#column-8533259 please note that this behavior is with the URL bar on top too, as the webpage is not scrolled. I consider the problem here is the board (portrait) card as in landscape mode you can correctly scroll it.

[abodea]

@sblatz I was able to reproduce the issue following the steps from the description as the bottom toolbar is hidden with no access to the tabs menu. But the Navbar was still displayed.

Note that this occurs on Instagram only if fast scrolling up and down until the login mandatory prompt is displayed.

I will remove the eng:qa:needed until further notice, and based on the responses/fixes I will verify the issue.

[sblatz]

Sounds like this is a pretty instagram specific issue at this point, and they're overriding the back button behavior, which I'm not sure how to handle. @snorp do you have any suggestions here on how to "detect" this bad behavior and override it?

[bubi-luka]

Sounds like this is a pretty instagram specific issue at this point

We experience this behaviour on GitHub also... #9482

[hiisukun]

This impacts my local Volumio instance. The interface scales to 'fill the mobile viewport', and is not scrollable. The bottom of the interface is pinned to the 'bottom of the viewport'. This means the inverse of this issue is true: the bottom toolbar won't go away, making an area equal to it's height unviewable in the interface.

The cut off area towards the bottom is the Play, Next/Prev etc controls.

[sblatz]

My patch here seems to fix Instagram and Github issues :) A touch on the screen when it's in this state will forceExpand the toolbar.

[sblatz]

This should be fixed on master now :)

[ebalazs-sv]

Verified as fixed on the latest Nightly 4/16 with Motorola Moto G6 (Android 8). The bottom toolbar is available after following the steps to reproduce from the description.