Bug 240860

Summary:

<body> with overflow: hidden CSS is scrollable when the visual viewport is smaller than the layout viewport

Product:

WebKit

Reporter:

Alex Moore <matthew.garrath.thomas>

Component:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

augus.dupin, ik, simon.fraser, tgels, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

All

OS:

Unspecified

See Also:

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

Attachments:

Description	Flags
testcase	none
testcase_video_safari	none
test_case_chrome	none

Description Alex Moore 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.

Comment 1 Alex Moore 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.

Comment 2 Alex Moore 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.

Comment 3 Simon Fraser (smfr) 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.

Comment 4 Radar WebKit Bug Importer 2022-05-30 23:01:16 PDT

<rdar://problem/94133614>