[mobile] Ignore overflow: hidden on body when layout is larger than the viewport

[karlcow]

Mozilla has an open issue about this. But it would be interesting to go the core and reasoning from the Google Chrome team. I think it is a reasonable choice and it should probably be specced if there is a precise algorithm for doing it.

Explanation:
When an overflow is applied on body or html (only?) and the design presents an area which is wider than the viewport (minus top and bottom toolbars), Chrome on mobile will ignore the overflow and makes it possible for users to scroll horizontally and vertically.

@RByers and @bokand might be able to help where in the Chromium code this is happening.

[karlcow]

I see that Chromium sets a bunch of preferences for Android including SetIgnoreMainFrameOverflowHiddenQuirk. I wonder if it's related.
https://cs.chromium.org/chromium/src/content/renderer/render_view_impl.cc?rcl=b854fac00a98fe03050b5ab5984e4f07ac49c99c&l=1013

[bokand]

Chrome on mobile will ignore the overflow and makes it possible for users to scroll horizontally and vertically.

That's not accurate, Chrome respects the overflow property on body/html. However, Chrome has two viewports: the visual and layout viewports. body/html scrolling applies to the layout viewport, so when you apply overflow: hidden to body/html, it restricts layout viewport scrolling. However, we don't want to prevent the user from panning around when they zoom in on the page. If the user zooms in, they can still scroll the visual viewport around within the layout viewport - but the layout viewport doesn't scroll.

The visual viewport is what you see on the screen for any given (pinch-)zoom level. To see the layout viewport, fully zoom out. The layout viewport is set such that it's equal in size to the visual viewport when fully zoomed out. See my demo page for a more intuitive understanding. Applying overflow:hidden will prevent scrolling the blue viewport but not the red. If your page loads at some initial scale that isn't minimal, it'll appear as though you can scroll but you're really panning the red box around.

One quirk to note: Chrome allows zooming out so that all the content width can be seen (to some limit). This means a really wide element can cause the layout viewport to be expanded (so that we can zoom out sufficiently far). You can prevent the layout viewport expansion by setting a minimum-scale in your viewport meta tag.

[RByers]

Thanks for the details Dave. We've been working to align our viewport model with Safari and Edge (and @staktrace has expressed some interest from Firefox), and talking about standardizing in CSSWG. How do Safari and Edge behave in this case?

[karlcow]

thanks @bokand that's very useful information and would certainly help us to have both browsers align their behavior. For now, our mutual differences for viewport handling create quite a number of Web compatibility issues, such as #62 and this one and a couple of others which might be variations.

[karlcow]

@RByers fwiht (new acronym 👹 ) For what I have tested, WebKit is mostly aligned with Blink at least on my naive tests.
http://la-grange.net/2016/12/01/viewport/