[Webkit-unassigned] [Bug 240859] New: <body> with overflow: hidden CSS is scrollable on iOS when Safari’s UI is collapsed

Mon May 23 22:54:54 PDT 2022

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

            Bug ID: 240859
           Summary: <body> with overflow: hidden CSS is scrollable on iOS
                    when Safari’s UI is collapsed
           Product: WebKit
           Version: Safari 15
          Hardware: iPhone / iPad
                OS: iOS 15
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Scrolling
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: matthew.garrath.thomas at gmail.com
                CC: simon.fraser at apple.com

Created attachment 459702

  --> https://bugs.webkit.org/attachment.cgi?id=459702&action=review

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.

-- 
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/20220524/37296447/attachment.htm>