1880375 - footer with "position:fixed;bottom:0" doesn't stay attached to bottom of mobile viewport (and moves further upwards on the screen than expected), when page is pinch-zoomed and dynamic toolbar disappears

Status: NEW

(Core :: Panning and Zooming, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: (ignore; broken version of testcase 1)

STR:

1. View attached testcase in Firefox on Android.
2. Pinch-zoom to slightly zoom in (to e.g. a blank area on the page).
3. Scroll downwards on the page. Try scrolling up and down (so the toolbar appears/disappears), and try scrolling to the bottom.

(Be sure you have "scroll to hide toolbar" enabled in your browser settings.)

ACTUAL RESULTS:

• When the browser toolbar disappears, the fixed-position footer (orange-with-lime-border) disconnects from the bottom of the viewport and moves upwards in the page.
• If you scroll all the way to the bottom, the red element is visible.

EXPECTED RESULTS:

• The fixed position footer should not move higher in the viewport than the bottom of the viewport.
• The red area should never be visible. It's the same height as the fixed footer, and it's the last thing in the page; so when you're scrolled to the end, that red area should be entirely covered up by the fixed footer.

Note: I ran into this in-the-wild, at this restaurant menu/about-page:
https://ludwigsmv.com/mountain-view-in-order-to-expedite-service-we-will-accept-three-cards-maximum-per-transaction-ludwigs-biergarten-about

I tested both Firefox Nightly 124 and release 122 on my Pixel 8 (Android 14), and got ACTUAL RESULTS.
Chrome on the same device gives EXPECTED RESULTS.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

(This might be a dupe; it feels like something we probably would have run into before. I didn't find the same bug when doing a quick search just now, though.)

Comment 3

[Hiroyuki Ikezoe (:hiro)]

I think once after we addressed bug 1641166, this will be also fixed by it. I mean, this is a part of issues where the zoom scale value isn't 1.0.

Comment 4

[Luke]

Here's a testcase I wrote debugging the same problem: https://output.jsbin.com/jakiguw

• Firefox for Android's position: fixed; bottom: 0 behaves similarly to Chrome for Android's position: absolute; top: calc(100dvh - var(--own-height)).
• Conversely, Firefox for Android's position: absolute; top: calc(100dvh - var(--own-height)) behaves similarly to Chrome for Android's position: fixed; bottom: 0.

However, if you lock and unlock the phone after pinch zooming, the two divs switch places to their correct positions ¯\_(ツ)_/¯

Comment 5

[Markus Stange [:mstange]]

This feels pretty broken. I can reproduce it on https://weather.com/ too.

Comment 6

[MGSimard]

Big issue for me on https://vertexblog.vercel.app/

Happens when I pinch zoom - taskbar that is fixed to bottom will unstick and an empty space appears below. I turned on the Mobile DevTools extension to have a look and see if it was a layout problem, and it turns out it's a space created completely outside the DOM hierarchy when hovering over elements. The DevTools window itself also inherits that bottom gap.

Not an issue on any other browser I've tested on for both mobile and desktop.