NEW240859
<body> with overflow: hidden CSS is scrollable on iOS when Safari’s UI is collapsed 
https://bugs.webkit.org/show_bug.cgi?id=240859
Summary <body> with overflow: hidden CSS is scrollable on iOS when Safari’s UI is col...
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. ***
Jason Michelson
Comment 4 2025-10-13 11:12:58 PDT
Any updates here? This is still a huge problem for developing gestures on mobile Safari. Here is an example of a block of code being used to disable scrolling: https://github.com/adobe/react-spectrum/blob/cbafcd398e65135264d9632a6535d5d7d94e5a73/packages/%40react-aria/overlays/src/usePreventScroll.ts#L71-L199 For Chrome/Firefox/Edge that whole block is essentially accomplished with overflow:hidden on document.body (with a couple lines to manage the scrollbar): https://github.com/adobe/react-spectrum/blob/cbafcd398e65135264d9632a6535d5d7d94e5a73/packages/%40react-aria/overlays/src/usePreventScroll.ts#L57-L69
Nick Coury
Comment 5 2025-10-16 10:32:46 PDT
Following up with a couple specific examples where this causes a broken user experience - https://photos.app.goo.gl/XESsBccxYcU8m5vq8 This especially occurs with layered experiences like immersive viewers or bottom sheets, but can also occur with other gestures. We have tried countless mitigations (though not as many as Adobe) and have never been able to reliably prevent this even if we can reduce this. Contrasted to other browsers where `overflow: hidden` on the body is sufficient to prevent base page scrolling. The ultimate impact on users is that Safari/WebKit experiences can subtly and seemingly randomly break for websites and web authors and it can be frustrating to try and mitigate in web code. Within our products, I'd say this comes up at least every 2-3 months in a new piece of code and we've probably spent several months collectively trying to minimize occurrences ourselves. Would be great if we could have this fixed at the root so web authors and users get a reliable experience. Thanks for the help here!
Note You need to log in before you can comment on or make changes to this bug.