1895994 - www.softrans.ro - Unable to scroll horizontally due to meta viewport

Status: ASSIGNED

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

Description

[James Graham [:jgraham]]

Environment:
Operating system: Android 12
Firefox version: Firefox Mobile 125.0

Steps to reproduce:
Unable to scroll horizontally to see the entire page.

Actual Behavior:
Missing items

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, Firefox Release
• Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/136624

Comment 1

[Thomas Wisniewski [:twisniewski]]

This also reproduces for me in the responsive design mode in Firefox with a local copy of the page.

The page is using a <meta> viewport element:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

If I change it to just width=device-width then I can scroll the page in Firefox as well. Chrome allows horizontal scrolling regardless.

Let's move this to Layout: Scrolling for now.

Comment 2

[Thomas Wisniewski [:twisniewski]]

:hiro, do you perhaps know what's going on here?

Comment 3

[Hiroyuki Ikezoe (:hiro)]

The body element has overflow-x: hidden, I don't know how Chrome makes the contents horizontally scrollable with overflow-x: hidden.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #3)

The body element has overflow-x: hidden, I don't know how Chrome makes the contents horizontally scrollable with overflow-x: hidden.

Well, to be precise, even with overflow:hidden, the container can be scrollable by programmatic ways such as scrollTo(), but it's not scrollable by touch gestures or some such.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Based on this comment do you think it might be related to visual vs layout viewport choices they have made?

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Yeah, it looks somewhat related to me. But in this specific case, the meta viewport tag has "initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0", so it's slightly different from the chrome's specific behavior.

You can see this behavior difference on desktop browsers as well. If you open the site on Firefox desktop and if you narrow down the browser window width, you will see the same result on desktop as well. And Chrome's desktop behaves as mobile Chrome. So it implies it's not mobile specific. I.e. meta viewport is not directly related to.

Comment 7

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1895994 - Add scrolling intervention for softrans.ro; r?ksenia

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5eaf6aca0191
Add scrolling intervention for softrans.ro; r=ksenia,webcompat-reviewers

Comment 9

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/5eaf6aca0191

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (standalone, partially reduced)

Here's a somewhat reduced testcase. This reproduces the bug in Responsive Design Mode on desktop -- in Chrome (with RDM), I can click-and-drag to scroll horizontally, whereas in Firefox I cannot.

Comment 11

[Daniel Holbert [:dholbert]]

So the important factor here (on top of the overflow-x:hidden) is that this site has display:table on the body element, for some reason. In Chrome, that makes horizontal scrolling just work (despite overflow-x:hidden).

I'll spin off a platform bug to track that interop difference (not sure if it's exactly our bug or a Chrome bug).

Comment 12

[Daniel Holbert [:dholbert]]

Actually there's one more important factor that's necessary for triggering the bug: minimum-scale in the viewport tag (which is relevant to the comment that twisniewski linked in comment 5, where bokand mentioned "You can prevent the layout viewport expansion by setting a minimum-scale in your viewport meta tag")

Comment 13

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 2 (including minimum-scale in viewport meta-tag)

Comment 14

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 3 (NOT including minimum-scale in viewport meta-tag)

Comment 15

[Daniel Holbert [:dholbert]]

Comparing testcases 2 and 3 between browsers (where the only difference is that testcase 3 lacks minimum-scale in its viewport meta tag):

        Scrollable:  Testcase 2   Testcase 3    
Chrome (Desktop)        Yes          Yes
Chrome (Desktop/RDM)    Yes          Yes
Chrome (Android)        Yes          Yes
Safari (macOS)          Yes          Yes
Safari (iOS)            Yes          Yes
Edge 18 (win10)         Yes          Yes
Firefox (Desktop)       No           No
Firefox (Desktop/RDM)   No           Yes
Firefox (Android)       No           Yes

So: hiro's right in comment 6 that we've got some sort of fundamental difference vs. all other engines (including pre-Chromium EdgeHTML) that's not mobile-specific.

(Though it is interesting that we happen to agree with other browsers in the one case of mobile-or-RDM and when minimum-scale is missing from the viewport tag.)

Comment 16

[Daniel Holbert [:dholbert]]

Let's morph this bug into a site report bug, particularly given that we've already landed a site-patch here. I've spun off bug 1918789 to serve as a platform bug here.