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

Fri Oct 29 08:04:37 PDT 2021

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

Jari <jarilittlenen at yahoo.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |jarilittlenen at yahoo.com

--- Comment #46 from Jari <jarilittlenen at yahoo.com> ---
(In reply to David Bokan from comment #11)
> 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 http://www.wearelondonmade.com/
>     - 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.

Thank you David

-- 
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/20211029/23ef9fcc/attachment.htm>