Let me simplify my layout for you:
<body>
[... lots of content ...]
<div id="modal-overlay">
</div>
</body>
The body has so much content that the whole page scrolls.
The styling for #modal-overlay looks like this:
#modal-overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
When a user performs an action, I show the #modal-overlay by changing display: block;
Now, the #modal-overlay fills the entire viewport.
But here's the problem...
Sometimes, when you swipe up or down on the #modal-overlay - its content scrolls as expected.
However, at other times, the body ends up scrolling instead, and the content within the #modal-overlay remains stationary. It's like I'm scrolling the body "through" the #modal-overlay, which is exactly what I want to avoid.
It seems completely random whether the swipe gesture scrolls the #modal-overlay or the body.
I've come across a few solutions (such as adding overflow:hidden to the body), but I'm hesitant to try them as they mess up the scroll position and cause other issues. I'm looking for a fix that works regardless of how many layers are nested. My goal is to prevent scrolling "through" the topmost layer, without tinkering with the layers beneath it.
This scrolling issue is especially problematic on iOS, as scrolling the body shrinks the browser chrome, expanding the viewport and disrupting the layout of the #modal-overlay which is sized to fit the viewport. Frustrating, isn't it?
Thank you in advance for any suggestions or help!