If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use
touchmoveevent but on iOS 15 that no longer works. Here we go.
The solution lies in preventing
pointermove while the modal is shown.
Using Rik’s code, here’s a demo on CodePen:
See the Pen
How to prevent scrolling the page on iOS Safari 15 by Bramus (@bramus)
In the near future we should be able to drop Rik’s code, and simply use the
overscroll-behavior CSS property (which I’ve covered here before back in 2017) for this. And by “near future” I really do mean soon: there’s been some active movement in the relevant WebKit bug since early December. Perhaps Safari 16 will include it? 🤞