<body> with overflow: hidden CSS is scrollable when the visual viewport is smaller than the layout viewport 
https://bugs.webkit.org/show_bug.cgi?id=240860
Summary <body> with overflow: hidden CSS is scrollable when the visual viewport is sm...
Alex Moore
Reported 2022-05-23 23:00:31 PDT
Created attachment 459703 [details] testcase The visual viewport can sometimes be smaller than the layout viewport. That is the case when a virtual keyboard is displayed on iOS, or when the page has been zoomed by the user. When setting `overflow: hidden` on the <body> element, the body is clipped to the current scroll position, and the user should not be able to see or reach the content outside of that clipped area. That is what normally happens, except when the visual viewport is smaller than the layout viewport. Indeed, in that case `overflow: hidden` is ignored, and the user is capable of scrolling the entire layout viewport, as if it was not set. This behaviour has been outlined by Simon Fraser in another ticket: > *We allow scrolling when the visual viewport is smaller than the layout viewport (this is necessary to avoid getting locked in when zoomed), but we allow scrolling to the entire document. Ideally we'd only allow panning around in the layout viewport.* > [https://bugs.webkit.org/show_bug.cgi?id=236561#c3](https://bugs.webkit.org/show_bug.cgi?id=236561#c3) As indicated, this is not the correct behaviour. Instead, body scrolling should effectively be blocked in such situation, that way when a virtual keyboard is displayed no scrolling should be possible. However, if the page has been zoomed, then the user should be able to scroll inside the clipped layout viewport area, but not beyond. No scrolling beyond that area should be possible. This is the behaviour in both Firefox and all Chromium-based browsers, and causes therefore an interoperability issue. Steps to reproduce with a virtual keyboard with the testcase: - scroll down to the middle of the page to have the text input in view, and see that you can normally scroll the body - tap the “Block Body Scroll” button, this sets “overflow-y: hidden” to the body - try to scroll up and down and see that you cannot do it anymore - tap inside the text input, bringing up the virtual keyboard - try to scroll again, and see that you can scroll the entire page again Steps to reproduce on page zoom with the testcase: - scroll up and down, and see that you can normally scroll the body - tap the “Block Body Scroll” button, this sets “overflow-y: hidden” to the body - try to scroll up and down and see that you cannot do it anymore - zoom the page with a “pinch” - try to scroll again, and see that you can scroll past the clipped area; you can scroll the entire page Not being able to reliably block body scrolling in all situations is extremely problematic, as it is necessary for many UI patterns, like dialogs, sidebars, bottom sheets, top menus, etc.. This is one of the most common problems web developers encounter with Safari, many complaints have been formulated over the years, and it has been reported for the first time in 2016: [Bug 153852](https://bugs.webkit.org/show_bug.cgi?id=153852) - <body> with overflow:hidden CSS is scrollable on iOS. Related issues: - Inconsistent scroll behavior when using overflow:hidden on body if added to home screen - ****[https://bugs.webkit.org/show_bug.cgi?id=214781](https://bugs.webkit.org/show_bug.cgi?id=214781) - Scrolling in home screen apps incorrectly latches to document - [https://bugs.webkit.org/show_bug.cgi?id=222654](https://bugs.webkit.org/show_bug.cgi?id=222654) - REGRESSION?: overflow:hidden on documentElement behaves inconsistently in iOS Safari 15.3.1 - [https://bugs.webkit.org/show_bug.cgi?id=236561](https://bugs.webkit.org/show_bug.cgi?id=236561) - Standalone with viewport-fit cover causes overscroll issues, breaks position fixed and -webkit-fill-available - [https://bugs.webkit.org/show_bug.cgi?id=237961](https://bugs.webkit.org/show_bug.cgi?id=237961) - <body> with overflow: hidden CSS is scrollable on iOS when Safari’s UI is collapsed (NEW) [https://bugs.webkit.org/show_bug.cgi?id=240859](https://bugs.webkit.org/show_bug.cgi?id=240859) Please let me know if you need any additional information.
Attachments
testcase (2.79 KB, text/html)
2022-05-23 23:00 PDT, Alex Moore 		no flags
Details
testcase_video_safari (7.97 MB, video/mp4)
2022-05-24 00:41 PDT, Alex Moore 		no flags
Details
test_case_chrome (12.09 MB, video/mp4)
2022-05-24 00:42 PDT, Alex Moore 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alex Moore
Comment 1 2022-05-24 00:41:16 PDT
Created attachment 459706 [details] testcase_video_safari Here is a video of the testcase in Safari, showing the problem.
Alex Moore
Comment 2 2022-05-24 00:42:29 PDT
Created attachment 459707 [details] test_case_chrome Here is the same testcase in Chrome on macOS, where you can see the expected behaviour.
Simon Fraser (smfr)
Comment 3 2022-05-24 20:57:43 PDT
> However, if the page has been zoomed, then the user should be able to scroll inside the clipped layout viewport area, but not beyond. No scrolling beyond that area should be possible. This is the correct description of the bug, and you're right that WebKit's behavior is incorrect here.
Radar WebKit Bug Importer
Comment 4 2022-05-30 23:01:16 PDT
<rdar://problem/94133614>
Note You need to log in before you can comment on or make changes to this bug.