Cannot Scroll Parent Website When Modal Is Open Inside an iFrame
#7,576 建立於 2025年1月7日
倉庫指標
- 星標
- (15,634 顆星)
- PR 合併指標
- (平均合併 8天 2小時) (30 天內合併 80 個 PR)
描述
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
- Embed a React app using the react-aria modal component within an iframe.
- Open the modal from within the iframe.
- 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+