1754323 - env(safe-area-inset-right) value is too big on some Android devices in landscape mode

Status: RESOLVED FIXED

(GeckoView :: General, defect, P3)

Description

[Ksenia Berezina [:ksenia] on leave until 09/15]

Attachment: 99164.html

We received a report in https://github.com/webcompat/web-bugs/issues/99164 where user is experiencing a problem with content being broken on the site when rotating device to landscape mode.

I've attached a reduced test case to this bug.

To reproduce:

1. Turn the device to landscape mode clockwise and load the attached testcase in Firefox on Android.

Expected:
"Off Topic" displayed in one line

Actual:
"Off Topic" is shifted because padding-right value from env(safe-area-inset-right) is the same width as the screen size.

Note that the problem is not reproducible if rotating in counter clockwise direction.
It also seems to be reproducible only on certain devices (for example: Google Pixel 5 and Google Pixel 4a, both on Android 12).

Also, if I remove viewport-fit=cover from the meta name="viewport"", the problem is going away.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I can reproduce on my OnePlus 9 fwiw.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Same test-case but printing the insets.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Fixup to print top safe area.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I can't repro on the same device on GeckoViewExample, not sure why. Makoto, do you know? However with some logging in nsPresContext::SetSafeAreaInsets, I see:

SetSafeAreaInsets((t=0, r=2184, b=0, l=0))

Which is the root of the problem, the right inset is massive.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

My guess is that GeckoView does nothing with LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, which android-components does.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Oh, but it's supposed to, what am I missing?

Anyways this is not a CSS bug, it's a GeckoView issue.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Ok so Chrome and GVE agree on there not being safe areas on the test-case above. So this might be some weird quirk of how Fenix is configuring the window or something? The cutout area on my device is definitely not covered.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

It'll probably take me quite a while to figure out all the bits and pieces here, unassigning for now since this is probably best worked on by someone that knows the Android-specific bits.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Ah, I found the bogus stuff. Wallpaper incoming though it's a deeper issue.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1754323 - Ensure safe-area calculations aren't too off. r=m_kato

The fix here is the EnsureAtMost call, but we can simplify a bit of the
related code by replacing the four conditionals with an
EnsureAtLeast call too, and using Deflate() rather than the manual
calculations.

This is sort of a wall paper over bug 1754323, but should be safe and
prevents ridiculously big safe areas.

Comment 11

[Ksenia Berezina [:ksenia] on leave until 09/15]

Thanks for looking into this!

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/10d25b442074
Ensure safe-area calculations aren't too off. r=m_kato

Comment 13

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/10d25b442074

Comment 14

[Pascal Chevrel:pascalc]

Emilio, this bug blocks bug 1754802 which is a Webcompat P1 bug, would uplifting the patch to beta help resolving it at this point? Would we also need bug 1754858? Thanks

Comment 15

[Emilio Cobos Álvarez (:emilio)]

This won't help resolving bug 1754802, though it's a pre-requisite, low risk, and fixes other compat issues, so might be worth uplifting.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9263336 [details]
Bug 1754323 - Ensure safe-area calculations aren't too off. r=m_kato

Beta/Release Uplift Approval Request

• User impact if declined: comment 0
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Simple wallpaper to avoid bogus screen calculations. Proper fix will be bug 1754802, which is ongoing.
• String changes made/needed: none

Comment 17

[Laurentiu Apahidean]

Attachment: 20220216_115311.mp4

I managed to reproduce the issue on Firefox RC 97.1.0 using a Google Pixel 6 (Android 12). On Nightly 2022-02-16 the issue no longer occurs. I tested both the test case from comment 0 and the https://offtopic.com/ website and both are working properly.

Comment 18

[Pascal Chevrel:pascalc]

Comment on attachment 9263336 [details]
Bug 1754323 - Ensure safe-area calculations aren't too off. r=m_kato

Approved for 98 beta 6 as it improves Web Compatibility of Gecko, thanks.

Comment 19

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/3e8645206408