[Webkit-unassigned] [Bug 240860] New: <body> with overflow: hidden CSS is scrollable when the visual viewport is smaller than the layout viewport

Mon May 23 23:00:31 PDT 2022

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

            Bug ID: 240860
           Summary: <body> with overflow: hidden CSS is scrollable when
                    the visual viewport is smaller than the layout
                    viewport
           Product: WebKit
           Version: Safari 15
          Hardware: All
                OS: Unspecified
            Status: NEW
          Severity: Normal
          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 459703

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

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.

-- 
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/f85cc321/attachment-0001.htm>