1911072 - msn.com - Triggering "Find in page" browser option causes overlapping of elements

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Attachment: 20240801_145427.mp4

Environment:
Operating system: Android 12/ Android 13
Firefox version: Firefox Nightly 130.0a1 (2016035631-🦎130.0a1-20240730164742🦎)

Preconditions:
Clean profile
Toolbar location set to "Top" from browser settings

Steps to reproduce:

1. Navigate to: https://www.msn.com/en-xl/news/other/white-house-calls-trump-repulsive-for-harris-black-person-comment/ar-BB1qYUgm?ocid=hpmsn&cvid=924c473259354b729a3abd0acf3cc0e4&ei=11
2. Scroll the page until the footer bar and action bar are present
3. Trigger the "Find in page" function of the browser and close it.
4. Observe the footer bar and action bar

Expected Behavior:
No overlapping elements

Actual Behavior:
the footer bar and action bar are overlapped

Notes:

• Reproducible regardless of the status of ETP
• Reproducible on the latest build of Firefox Nightly and Release
• Works as expected using Chrome with the same setting triggered
• Attachment provided
• Issue found during WebCompat team [Top100] websites testing
• Does not seem to reproduce if the browser's Toolbar is set to TOP

Comment 1

[Daniel Holbert [:dholbert]]

One clarification on STR:

Trigger the "Find in page" function of the browser and close it.

More specifically:

• Trigger the "Find in page" function
• ...and then tap the downarrow at the bottom left of the keyboard. (do not close the find-in-page UI.)
• (or, just try to scroll the page, which also dismisses the keyboard)

With that clarification, I can reproduce this issue. I think this is a case where we're still setting aside space for the navbar (subtracting that away from the fixed-position viewport.

DIAGNOSIS NOTES:
Both elements here have position:fixed; bottom: 0; styles applied to them, and when you scroll down, the site adds a dynamic vertical offset to each of them, intending to shift them fully offscreen[1]. But because we're setting aside space for the navbar (or something like that) and pushing fixed-position elements inwards, they don't actually make it all the way offscreen.

The fact that they overlap isn't actually a bug -- that's by-design, as far as I can tell -- but you're not supposed to be able to see that they're overlapping, because the position-at-which-they-are-overlapping is supposed to be offscreen.

[1] e.g. for the <action tray>, the site shifts it offscreen by giving it transform: translateY(72px) (which is 1 more than its height:48px plus padding-bottom: 23px, which should make its content-box be fully off-screen).

And for the <mobile-footer>, the site overrides bottom:0 with bottom: -50px, which is more than enough to scroll it entirely offscreen (it's only ~20px tall for me).

Comment 2

[Daniel Holbert [:dholbert]]

So the more basic issue here is just that we unnecessarily steal some space from the fixed-position viewport when the findbar is up and the keyboard is collapsed.

This might be somewhat related to bug 1908639 where we get a similar issue of the full viewport being compressed when the find-bar is up. That bug happens to have just had some patches land 12 hours ago, though those patches seem to be PDF-specific to a certain extent, so I'm not sure if there's any chance that they'd help here.

Comment 3

[Petru-Mugurel Lingurar [:petru]]

Testing with the latest central (including the changes from bug 1908639, particularly https://phabricator.services.mozilla.com/D220281) I can't reproduce this.
Daniel can you confirm this appears as fixed?
(Thanks for being so fast on these!)

Comment 4

[Daniel Holbert [:dholbert]]

Confirmed, this appears fixed in Nightly 2024-09-11 (not available on play store yet I think, but runnable via mozregression). (built from https://hg.mozilla.org/mozilla-central/rev/169a59fe35f8 )

Previous Nightly 2024-09-10 was affected, so almost certainly fixed by bug 1908639.

Thanks!