Cannot Scroll Parent Website When Modal Is Open Inside an iFrame

Provide a general summary of the issue here

I have a website that uses the react-aria modal component. This website is embedded within an iframe on a parent website. When I open the modal inside the iframe, the parent website becomes unscrollable. This issue occurs specifically on iOS Safari.

It seems that the scroll locking behavior of the react-aria modal affects the parent website, even though the modal is confined to the iframe.

🤔 Expected Behavior?

The parent website should remain scrollable, and the scroll locking behavior should only apply within the iframe containing the modal.

😯 Current Behavior

The parent website becomes unscrollable when the modal inside the iframe is opened.

💁 Possible Solution

It seems that the scroll locking behavior of the react-aria modal.

🔦 Context

You can try in this demo repository. Parent means parent website which uses iframe and react-aria is for website that is embedded in the iframe. https://github.com/htutwaiphyoe/iframe-resizer

🖥️ Steps to Reproduce

1. Embed a React app using the react-aria modal component within an iframe.
2. Open the modal from within the iframe.
3. Attempt to scroll the parent website (outside the iframe) while the modal is open.

Version

^1.5.0

What browsers are you seeing the problem on?

Safari

If other, please specify.

iPhone

What operating system are you using?

iOS

🧢 Your Company/Team

Social+

🕷 Tracking Issue

https://github.com/htutwaiphyoe/iframe-resizer