Inset of iOS devices is scrollable on modals

[AlexCheongIE]

I have noticed that the inset on iOS devices are scrollable when a modal is open. I have read most of the issues related to iOS here and it has no mention on this inset.

The fix for this is usually to add in viewport-fit=cover to the viewport meta tag and then the relevant paddings based on the CSS envrionment variable safe-area-inset-*

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

There is certainly more value in updating the design of a website to cater for this safe area, but I'm wondering if there is a way to lock the scroll even without the meta tag addition or since it's occurring based on the vendor, it should be the responsibility of the consumer to use the tool available (meta tag) to support it?

Safe area example - scrolling anywhere on the red shaded sides will not be locked source: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Steps To Reproduce:

1. Go to https://bodyscrolllock-modal.vercel.app/ on any iOS device with an inset and safe area
2. Open the modal to lock the scroll
3. Use a scroll or swipe gesture on the inset area on either side of the screen
4. Notice that it's scrolling the back page

The current behavior

Scrolling of the background is still possible.

The expected behavior

Scrolling should be locked.

Here is a video to demonstrate the scroll behaviour Example

[taejs]

Is there any quick fix for this?