Setting overflow:hidden on body should prevent scrolling. It's taken so long already to get any action accomplished on this, and the end result doesn't appear to actually fix the issue at all. I don't mean to be disagreeable, but I think this is *extremely* unfortunate. (In reply to Simon Fraser (smfr) from comment #34)
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. When you shipped this did you already have a visual/layout viewport? Did overflow: hidden apply only the the layout viewport. 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. If the user zooms in, they can still pan around but the layout viewport will not scroll from it's original position. Overflow: hidden applies only to the layout viewport scrolling. When the page loads, Chrome zoomes out to the minimum possible scale so the visual viewport will match the layout viewport on load. In the case of a desktop page where we fallback to the 980px initial containing block, the layout viewport will be 980px wide. The layout viewport is sized to cover the entire content width. 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: 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. Why is safari zoomed in so much? Doesn't allow zoom. Tap the blue button to make the Bootstrap modal dialog appear. iOS 9 loads zoomed in - iOS11 loads zoomed out like ChromeĢ. Better on Chrome because Chrome sizes layout viewport to match content width, loads zoomed out - the rest is just pinch zoom I'm guessing Safari loads zoomed in because, even in request desktop site, it respects the viewport which has initial|min|max-scale: 1? Or perhaps related to overflow: hidden as above. When I turn it off using inspector I can zoom outĭesktop version of // Safari iOS 9 locks the page to zoomed in if overflow: hidden is on.
Chrome loads the page zoomed out fully so everything is visible Problematic on Safari (all work correctly in Chrome): Works correctly, all page content is reachable overflow-x: hidden - there should be no horizontal scrolling overflow: hidden commented out but would work regardless, there's no scrolling on the page There doesn't appear to be any scrolling on the page. Respecting overflow: hidden would actually improve the UX here Safari allows scrolling main frame a little which actually feels wrong since it shifts the UI out of view Appears intentional and correct - scrolling should occur only on the subscroller Overflow(-x): hidden still there but site works correctly in both Chrome and Safari (if overflow: hidden were respected). (Apple developer documentation) appears fixed No overflow: hidden today - site was fixed:
It seems they fall into one of three buckets (mainly using 6S iOS 9): The should not scroll (just like on OS X Safari). The underneath the yellow box scrolls downward. Attempt to scroll the yellow box further downward (which is to say, apply a "fling upward" gesture to the yellow box). Scroll the yellow box to its bottom, where there are "Close" and "Save changes" buttons, and lift your finger off the screen to ensure that the scroll gesture ends.ĥ. Open the attached testcase in iOS Safari.Ĥ. Lost to the sands of time, but is relevant & popular.ġ. This works correctly on OS X Safari, but doesn't work correctly on iOS Safari. Applying `overflow: hidden` to the `` should make it non-scrollable.