[Webkit-unassigned] [Bug 153852] <body> with overflow:hidden CSS is scrollable on iOS

Fri Mar 9 09:11:10 PST 2018

https://bugs.webkit.org/show_bug.cgi?id=153852

--- Comment #11 from David Bokan <bokan at chromium.org> ---
Thanks smfr@, I've looked into each case. It seems they fall into one of three buckets (mainly using 6S iOS 9):

No overflow: hidden today - site was fixed:
  https://translate.google.dk/translate?hl=da&sl=en&u=http://www.wikihow.com/&prev=search
  Pages on https://surf.miracosta.edu
  (Apple developer documentation) https://developer.apple.com/documentation/ appears fixed

Overflow(-x): hidden still there but site works correctly in both Chrome and Safari (if overflow: hidden were respected).
  https://books.google.com.mx/books?id=vCMIOfrbYrAC&pg=PA83&dq=Funciones+inyectivas,+suprayectivas+y+biyectivas&ei=AiCHSvDONqbKyQTEhO2fDg#v=onepage&q&f=false
    - Appears intentional and correct - scrolling should occur only on the subscroller
    - Safari allows scrolling main frame a little which actually feels wrong since it shifts the UI out of view
    - Respecting overflow: hidden would actually improve the UX here
  https://mobility.agbar.net/mobility-server/
    - There doesn't appear to be any scrolling on the page.
    - Page loads fully zoomed out
    - overflow: hidden commented out but would work regardless, there's no scrolling on the page
  http://www.arnb.org/Festivals.php
    - overflow-x: hidden - there should be no horizontal scrolling
    - Works correctly, all page content is reachable

Problematic on Safari (all work correctly in Chrome):
  http://archives.nyphil.org/index.php/artifact/63041fe8-4b51-4f96-ae82-e40bccf152cd/fullview#page/1/mode/2up
    - No viewport meta
    - Chrome loads the page zoomed out fully so everything is visible
    - Safari iOS 9 locks the page to zoomed in if overflow: hidden is on. When I turn it off using inspector I can zoom out
  desktop version of live.com/hotmail.com/outlook.com
    - Works correctly in Chrome Android
    - There is overflow-x: hidden
    - I'm guessing Safari loads zoomed in because, even in request desktop site, it respects the viewport <meta> which has initial|min|max-scale: 1? Or perhaps related to overflow: hidden as above.
  https://support.eadocsoftware.com
    - No viewport meta
    - Better on Chrome because Chrome sizes layout viewport to match content width, loads zoomed out - the rest is just pinch zoom
    - Why doesn't Safari allow zooming out?
    - iOS 9 loads zoomed in - iOS11 loads zoomed out like Chrome
  1. Open http://output.jsbin.com/sagowo in iOS 9 Safari.
  2. Tap the blue button to make the Bootstrap modal dialog appear.
    - Works correctly in Chrome
    - Chrome shows the page zoomed out
    - No viewport meta tag
    - Why is safari zoomed in so much? Doesn't allow zoom...
    - iOS 11 works, loads zoomed out

In all the problematic cases it looks like the issue is that Safari loads the page zoomed in and then can't scroll because of overflow: hidden. Was this tried before Safari shipped the visual/layout viewport model? Having the split viewport makes these issues quite tractable; Chrome seems to handle these cases rather gracefully so let me explain what we do:

The layout viewport is sized to cover the entire content width. In the case of a desktop page where we fallback to the 980px initial containing block, the layout viewport will be 980px wide. When the page loads, Chrome zoomes out to the minimum possible scale so the visual viewport will match the layout viewport on load. 

overflow: hidden applies only to the layout viewport scrolling. If the user zooms in, they can still pan around but the layout viewport will not scroll from it's original position. This matches the behavior on desktop. If a page is broken in Chrome Android, it's likely also broken on a desktop browser because the layout viewport operates analogously to the browser window.

When you shipped this did you already have a visual/layout viewport? Did overflow: hidden apply only the the layout viewport. Safari on iOS11 loads all the problematic cases zoomed out  just like Chrome so just marking the layout viewport overflow: hidden wouldn't break any of them.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180309/6588a6f5/attachment-0001.html>