1923425 - position:sticky footer isn't aligned with the bottom of the screen, if it's wide enough to make the viewport scale to fit it

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (view on Android or in RDM)

Steps to reproduce

1. Load attached testcase in Firefox for Android, or in RDM on Desktop.

Expected behavior

The blue-bordered sticky footer should be aligned with the bottom of the screen.

Actual behavior

The blue-bordered sticky footer is further up on the screen.

Device information

• Firefox version: 131.0 (release), 133.0a1 (nightly)
• Android device model: Pixel 8. Also reproduced on desktop with RDM
• Android OS version: 14

Any additional information?

• I think this has to do with the Visual Viewport scale.
• This seems to be the underlying issue causing the footer to be mispositioned in webcompat bug 1917546.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Safari on iOS (note the footer is bottom-aligned, which is good/expected)

FWIW in Safari on iPhone 14 (iOS), it looks like the content doesn't automatically get scaled down to fit the wide element at all. The viewport is only slightly wider than the gray element (just from the default margin on body), and the blue footer is at the bottom (and runs quite a ways off the right side of the viewport).

Here's a screenshot of Safari on iPhone 14, from BrowserStack.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Chrome on Android (note the footer is bottom-aligned, which is good/expected)

Here's a screenshot of Chrome on a Samsung Galaxy S24 in BrowserStack. Note that Chrome does scale down the content (i.e. grows the viewport) in an attempt to fit the width of the wide element, though it's so wide that it still runs off the right side. But even with that scale, the sticky element's bottom:0 gets honored and snaps it to the bottom of the viewport that the user sees.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox on Android (note the footer is **not** bottom-aligned, which is bad/unexpected)

Here's a screenshot of Firefox 127.0.2 on the same BrowserStack-hosted Samsung Galaxy S24. (Nightly 133 behaves the same.)

We render at roughly the same scale as Chrome, but we don't seem to update the sticky-positioned element to accommodate the scaled viewport size.

Comment 4

[Daniel Holbert [:dholbert]]

(ni=hiro was perhaps unnecessary; just wanted to be sure this was on someone's radar for further triage & potential investigation. I guess it'll surface in APZ triage meeting in any case. :) Thanks!)

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Thanks for finding this!

I didn't imagine that sticky elements also need to behave as fixed elements. I had been missing it for years. :/

(To be precise, the viewport is called fixed viewport.)

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Setting P3:S3 since it's been there for years. Given that the severity of the original bug (bug 1917546) is S4, it would be reasonable.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

I somehow missed setting them?