iOS Safari Ignores Body Overflow: Hidden when Input Focused

It appears that on iOS 14.5 in Safari (haven't tested in Chrome), overflow: hidden is ignored if the user is focused in an input field. Now, you can add a touch-action: none to the body element and that works in some situations, but it's a hack (it doesn't actually disable scrolling) and that attribute is also ignored if there's a child element with overflow: auto AND is not scrollable. The issue is easily replicate-able:

1. Open the following code in an iOS Safari window:

body,
html {
  touch-action: none;
  overflow: hidden;
}

.test {
  height: 100000px;
}

.test-inner {
  overflow: auto;
  height: 400px;
  width: 100%;
}

<div class="test">
  <div class="test-inner">
    <input type="text">
  </div>
</div>

(note: adding height: 100% to body makes no difference)

2. Try to scroll by dragging in the green div area and you'll notice that you can't because the overflow: hidden is behaving as expected.
3. Tap into the input field to focus it and you'll notice that you now can scroll as if overflow: hidden and touch-action: none is now being totally ignored.

Has anyone else run into this issue? If so, have you found a non-JS solution to it?

from iOS Safari Ignores Body Overflow: Hidden when Input Focused