Body and fixed div scrolling issues in Safari / Chrome / Firefox for iOS

Here is a test web page:

https://codepen.io/zephyr103/pen/KOxgzL

includes code like:

body.no-scroll {
  overflow: hidden;
}

It works in my MacOSX browsers (including the iOS/Android simulators in Chrome) and usually works fine in Android. It has problems in Safari, Chrome and Firefox in iOS.

When you click "Short Quote" or "Long Quote" it has a variable height fixed position popup with a transparent grey overlay that you can click on to exit the popup.

When you scroll (using touch dragging or mouse wheel) the popup or overlay it is meant to either ignore it (when you scroll the grey overlay) or scroll the popup content - if some is hidden. If none of the popup is hidden then it also ignores drags.

This is how it works: The #text-viewer popup uses overflow-y auto. When the popup is active it adds the "no-scroll" class to the body element. This class has the css of "hidden" for overflow. This is supposed to stop the body from scrolling whether you are dragging the popup or the grayed out overlay.

On iOS the transparent overlay can be scrolled and when you scroll the "Short Quote" popup it also scrolls the body. When dragging the short quote popup nothing is supposed to scroll.

from Body and fixed div scrolling issues in Safari / Chrome / Firefox for iOS