Showing app-store-banner in RTL layouts causes horizontal scrollbars

[janbrasna]

Description

In WebKit, displaying pages with *_app_store_banner in RTL languages makes something overflow the expected viewport, causing the overall page scroll left, far beyond any content.

Steps to reproduce

https://www.mozilla.org/ar/firefox/ — have firefox_app_store_banner shown (if it was dismissed before you may need to use a separate profile / private mode / clear your cookies or local storage etc., check for UAstring it's not masking itself as "desktop mode" etc.) — and then try scrolling left, beyond the page bounds.

Expected result

The presence of a banner should not cause extra scrolling / page dimensions change.

Actual result

Screen.Recording.2024-12-11.at.16.41.13.mov

Once dismissed, the page width gets back to normal.

Environment

Safari Mobile.

This does not reproduce for me in Gecko, however does in Focus iOS / Firefox iOS as that uses WebKit too.

(I can also reproduce in desktop Safari using Responsive mode and spoofing an Android Mobile UA as seen in the screen capture.)

[janbrasna]

I'm actually suspecting the same issue to cause not even displaying the pages affected (or scrolled way off) in Android chromium:

Screen.Recording.2024-12-27.at.14.45.10.mov

(only impacts those pages with app-store-banner, and only after it loads as is shown at the end with Focus loading taking some time, and only breaking once loaded…)

EDIT: Confirmed on a physical device (albeit LTR/EU system) that chromium similarly to webkit stretches the canvas way off to the left, in this case however pans all the way to the empty space by default making some of the most important pages (as ar/firefox, ar/firefox/mobile, ar/firefox/focus, ar/firefox/android, ar/firefox/ios) seem empty or broken.

It can be also reproduced with Chromium responsive mode:

Screen.Recording.2025-01-02.at.6.16.07.mov

showing the pages are loaded scrolled several viewport widths away from the actual page content, appearing blank/broken, as long as the banner is present (video shows the issue going away after dismissing it).

Don't have an RTL-configured device on OS level to check if the effect is different, so it's only an assumption that it would render the same as demonstrated above on LTR systems with html[dir=RTL] content, but an AVD simulator (sdk_gphone_x86) switched to RTL language system-wide shows no difference — effectively displaying what would appear as blank pages for those key URLs outside of Gecko.