Overscroll Behavior not respecting elements with no overflowing content

• Component: Scrolling
• Status: NEW ---

Created attachment 461359 [details]
overscrollbehavior.html

In Safari, the overscroll-behavior CSS property doesn't have any effect when the overflow property is set to "auto", "hidden" or "scroll" and when the content doesn't overflow. The overscroll-behavior CSS property should affect the scrolling behavior even if the content doesn't overflow.

Steps to reproduce:

1. Open the attached overscrollbehavior.html on a desktop browser.
2. Move the mouse cursor over the white box on the right side.
3. Try to scroll the white box with two finger scrolling.

Expected behavior: Nothing should happen. The underlying page with the blue "Main" texts should not scroll.

Actual behavior: The underlying page with the blue "Main" texts is scrolled.

Note that the gray box on the left side behaves correctly. Scrolling it with the two finger scrolling only scrolls the black "Left" texts. The blue "Main" texts are never scrolled.

Chrome 103 has the same bug https://bugs.chromium.org/p/chromium/issues/detail?id=813094
Firefox has the same issue, but no one has filed a bug for it.

Tested on Safari Technology Preview 149 (Safari 16.0, WebKit 17614.1.19.1.5) with the experimental CSS Overscroll Behavior feature enabled.

[Radar WebKit Bug Importer]

<rdar://problem/98381693>

[Simon Fraser (smfr)]

To implement this we’d have to represent non-scrollable boxes with overscroll-behavior:contain in the scrolling tree, which is a fair amount of work.