REGRESSION?: overflow:hidden on documentElement behaves inconsistently in iOS Safari 15.3.1

• Component: Scrolling
• Status: NEW ---

When I set `overflow: hidden;` on documentElement and/or scrollingElement, it only prevents scrolling when the scrollTop = 0 and the Safari UI is visible.

If I scroll first, then set `overflow: hidden;`, I can scroll until scrollTop = 0 and Safari UI becomes visible - *then* it locks.

Note: Only tested this on iPad Mini, iOS 15.3.1

I think this is a regression, #153852 covers overflow on body and was marked as fixed:
https://bugs.webkit.org/show_bug.cgi?id=153852

Related tickets (regarding overflow in standalone / home screen apps):
* https://bugs.webkit.org/show_bug.cgi?id=220908
* https://bugs.webkit.org/show_bug.cgi?id=214781

For people stumbling across this:

My current workaround after a bit of testing and weighing the pros and cons is to detect iOS and force the scrollTop = 0. This is not a solution, however, as it's going to become annoying for users very quickly when the page jumps to the top. The alternative, however, may feel even buggier.

Added bonus: Setting scrollbarGutter will prevent layout shifts when the scrollbar dis-/reappears.

// Lock
if (__isIOS) documentElement.scrollTop = 0;
http://documentElement.style.overflow = 'hidden';
http://documentElement.style.scrollbarGutter = 'stable';

// Unlock
http://documentElement.style.overflow = '';
http://documentElement.style.scrollbarGutter = '';

[Radar WebKit Bug Importer]

<rdar://problem/88890931>

[Simon Fraser (smfr)]

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.

[Simon Fraser (smfr)]

scrollbarGutter is not implemented in WebKit so I'm not sure what that has any impact.