Bug 240859

Summary: <body> with overflow: hidden CSS is scrollable on iOS when Safari’s UI is collapsed
Product: WebKit Reporter: Alex Moore <matthew.garrath.thomas>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: augus.dupin, ryan, simon.fraser, webkit-bug-importer, zouhir
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: iPhone / iPad   
OS: iOS 15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=236561
https://bugs.webkit.org/show_bug.cgi?id=240860
Attachments:
Description Flags
testcase
none
Test Case Video none

Alex Moore
Reported 2022-05-23 22:54:54 PDT
Created attachment 459702 [details] testcase In Safari on iOS, when setting the value “hidden” to “overflow” on the <body> element, manual scrolling is not prevented when the browser UI is collapsed. Steps to reproduce with the testcase in Safari on iOS: - scroll up and down, and see that you can normally scroll the body - go to the top of the page, and scroll down a bit to hide the browser UI - tap the “Block Body Scroll” button, this sets “overflow-y: hidden” to the body - scroll down, and see the body scroll whereas it shouldn’t This behaviour is undesired. Per the “****CSS Overflow Module Level 3****” draft ([https://drafts.csswg.org/css-overflow/#overflow-properties](https://drafts.csswg.org/css-overflow/#overflow-properties)): > “hidden: This value indicates that the box’s content is clipped to its padding box and that the UA must not > provide any scrolling user interface to view the content outside the clipping region, nor allow scrolling by > direct intervention of the user, such as dragging on a touch screen or using the scrolling wheel on a mouse.” This is extremely problematic as preventing user scrolling on the page is necessary for many UI patterns, like dialogs, sidebars, bottom sheets, top menus, etc.. This is an interoperability issue as both Firefox and all Chromium-based browser respect the specification. 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) (FIXED) - <body> with overflow:hidden CSS is scrollable on iOS. The reason provided not to fix it was the following: > *This is by design; scrolling is necessary to reveal the browser UI. This could be improved in future.* > Simon Fraser in the initial bug report, [https://bugs.webkit.org/show_bug.cgi?id=153852#c34](https://bugs.webkit.org/show_bug.cgi?id=153852#c34) However, since Safari 15, the mechanism for Safari’s UI to be revealed has changed. Now it doesn’t require the body to be scrolled, the UI is revealed/collapsed on simple up/down touchmoves. Possibly, this was changed precisely to solve this issue. Therefore, there is no more justification today not to respect the specification and indeed prevent manual body scrolling when “overflow: hidden” is set on the <body> element, even if Safari’s UI is collapsed. Related issues: - 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) Please let me know if you need any additional information.
Attachments
testcase (2.69 KB, text/html)
2022-05-23 22:54 PDT, Alex Moore 		no flags
Details
Test Case Video (6.16 MB, video/mp4)
2022-05-23 23:04 PDT, Alex Moore 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alex Moore
Comment 1 2022-05-23 23:04:38 PDT
Created attachment 459704 [details] Test Case Video Testcase Video
Radar WebKit Bug Importer
Comment 2 2022-05-30 22:55:15 PDT
<rdar://problem/94133267>
Simon Fraser (smfr)
Comment 3 2024-10-30 16:34:52 PDT
*** Bug 282347 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.