User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

HTML block with position:fixed and high z-index, followed by block wider than screen. Scroll left and right.

Actual results:

"Fixed" block is scrolled with the rest of the content. Right-aligned content in the fixed block is positioned way right at the right border of the wide content.

Calculating the position of the right-aligned content with Javascript (not in the test case) results in the position where the content should have been displayed.

Expected results:

Fixed block should be fixed. Right-aligned content should be aligned with the right edge of the screen. Loading the test case into FF for Windows works as expected. This also worked in the last FF for Android versions.

Hi, can you please provide the page? Thank you.

The test case is attached.

For a real-world example see:

Narrow page that works correctly:

https://atlas.arages.de/

Wide page that does not work:

https://atlas.arages.de/source/3534

You may have to use a tablet, otherwise the liquid design kicks in and makes the problem harder to see.

Hi, thank you for providing extra information. I reproduce on device: Huawei MediaPad M3 Lite 10 (Android 7.0) on builds: Firefox Nightly 68.0a1 (2019-06-11) Firefox Beta (68.0b9) and Firefox Release (67.0.2). I reproduce the issue with "Test Case" attachment and with the wide page: https://atlas.arages.de/source/3534. This seems like a gecko view issue. NI-ing Chris to triage.

"Fixed" block is scrolled with the rest of the content. Right-aligned content in the fixed block is positioned way right at the right border of the wide content.

I see the same layout of the attached test case in both Firefox 67 and Chrome 74 on Android 8.1.0: the fixed-position "Item 2" is positioned off screen and I must scroll horizontally to see it. In Firefox and Chrome on Windows, the fixed-position "Item 2" is correctly positioned on the right edge of the visible window. So maybe this is expected layout behavior on mobile devices?

This also worked in the last FF for Android versions.

So the test case layout was the same as desktop in Firefox 66 on Android? And it broke after the Firefox 67 update?

Hi Michael, can you provide the information from Comment 5 for Chris?

I'm not 100% sure it was 66, but in one of the recent versions the rendering on FF for Android was the same as on FF for Windows.

Given this is an Android-only position:fixed bug, I suspect moving this to APZ is probably right.

Given that our behaviour now matches Chrome on Android I suspect this change was intentional for compatibility. cc'ing Hiro who might know more. I'll get a regression range if possible.

Basically, this change in behaviour was intentional: as of Firefox 63 (bug 656036), position:fixed elements are attached to the page's "layout viewport", which may be larger than what is currently on-screen ("visual viewport").

See this document and this demo for some further discussion of these concepts and rationale.

Chrome has implemented this behaviour change a while ago, and now we did the same to enhance compatibility. If you try loading the page in Chrome Mobile, you'll see the fixed-position element has the same behaviour there.

One difference we still have from Chrome is that in Chrome, you can zoom out far enough that the entire width of the fixed element is onscreen. In Firefox you currently can't on this page, due to bug 1508177.

Regression range pointed to bug 1516377. WONTFIXing this as it is intentional as Botond said above.

It's worth noting that as a page author, you do have some control over the sizing of the layout viewport. On this page, if you include minimum-scale=1.0 in the <meta name="viewport"> tag, the layout viewport will be sized to match the visual viewport on page load, and consequently, the fixed position element will remain fixed to the screen at this zoom level. (It will still scroll offscreen if you zoom in further and then scroll.)

That's a terrible decision! This gives me the choice of a readable page with a menu that is not fixed to the top of the screen, or an unreadable page because I have to zoom out very far.

What can I do to get the same rendering as on the desktop?

Does my suggestion of using minimum-scale=1.0 work for you?

Yes, it does, thank you! I misread your comment earlier.