'overflow: hidden' on document body does not behave as expected in iOS/iPadOS PWA

• Component: CSS
• Status: NEW ---

Details:

The CSS property overflow: hidden on the document body does not function as anticipated within PWA on iOS/iPadOS platforms. Specifying this CSS property should restrict the body's scroll position and limit the content to what is currently visible, which is the behavior in regular iOS/iPadOS Safari. However, within a PWA, this does not occur. Instead, users can continue scrolling the body as usual, regardless of the CSS declaration.

Steps to Reproduce:

Create a PWA for iOS/iPadOS.
In the CSS, specify overflow: hidden for the document body.
Launch the PWA and attempt to scroll the page.

Expected Results:

The scroll on the document body should be locked, and only the current visible content should be accessible, matching the behavior in normal Safari on iOS/iPadOS.

Actual Results:

The user is able to scroll the page normally in the PWA, even with overflow: hidden specified on the document body.

Impact:

This behavior prevents the correct implementation of scroll locking for modal/dialog interfaces in iOS/iPadOS PWAs, thus affecting user experience.

Workaround:

A workaround can be implemented by setting position: fixed, setting the body top to the current scroll offset, and then resetting the top attribute and scroll offset upon disable. However, this leads to an undesirable page flicker upon execution, which can be a detriment to the user experience.

Reproducibility:

This issue is consistently reproducible.

[Radar WebKit Bug Importer]

<rdar://problem/113346427>