Cannot Scroll Parent Website When Modal Is Open Inside an iFrame

[htutwaiphyoe]

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

[LFDanLu]

I tried using your sample repro but not quite sure which of the subdirectories I'm suppose to be running to reproduce the issue, mind clarifying the steps to reproduce? From a high level, we could probably apply the preventScroll document styles to the iframe's document instead perhaps, not entirely sure what is expected in this scenario from an accessibility point of view though

[htutwaiphyoe]

Thank you for your reply. Here is the issue to reproduce with my sample repo

1. Clone the repo
2. Go to react-aria folder, install dependencies and npm run dev in local
3. Go to parent folder, install dependencies and npm run dev in local
4. Go to parent folder, in App.tsx, add react-aria url in the src of IframeResizer.
5. Test the parent URL in iPhone safari (You can use simulator)
6. Click open to show react-aria modal
7. Try to scroll from modal

[LFDanLu]

Thanks for the repro steps, I see what you mean now I think, the user is unable to scroll the parent page if their touch starts within the iframe correct? We have some custom scroll prevention logic for mobile Safari which is most likely the cause of this behavior. Will have to dig for some alternatives because we do want to prevent scrolling inside the iframe when the modal is open (hence the above code) but I can see this being problematic if the iframe itself is taking the whole viewport but the user want to scroll the parent

[htutwaiphyoe]

Yes, you are spot on. The issue occurs when the touch starts within the iframe while modal is open and it is preventing the user from scrolling the parent page. I understand the need for locking body scroll when modal is open but as you see it is preventing the parent scroll too. Thank you for your cooperation.