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:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Major

CC:

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

Priority:

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

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

Comment 1 Alex Moore 2022-05-23 23:04:38 PDT

Created attachment 459704 [details]
Test Case Video

Testcase Video

Comment 2 Radar WebKit Bug Importer 2022-05-30 22:55:15 PDT

<rdar://problem/94133267>