search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.35k stars 808 forks source link

Page jumps on open of modal, when inside of iframe #659

Open deporter opened 6 years ago

deporter commented 6 years ago

Summary:

When opening a React Modal on iOS using Safari and Chrome within an Iframe, and the iframe is surrounded by other content above and below, the page jumps way below the iframe. This means the user loses context.

Expected behavior:

Page should stay in the same position on open of Modal

Example of issue:

https://www.foxsports.com.au/nrl/state-of-origin/teams/queensland/after-15-years-the-maroons-are-looking-for-a-new-no9-and-captain/news-story/bbb5c3094b60a4d216850209423656fd

On iOS device, got to above link, scroll down to "State of Origin Team Selector", click plus to add player. The page jumps on open of modal.

Additional notes:

I was able to narrow it down to the modal specifically, as if i remove everything but the modal opening it doesn't jump, even if the button is still changing the state.

I assume this is probably some iOS bug, but if anyone can help with this that would be great. Thanks

chemitaxis commented 6 years ago

Hi, I have exactly the same issue... any updates?

chemitaxis commented 6 years ago

@deporter Hi! I have checked that in your example, the issue is fixed. Can you please provide how did you solved? Thank you so much!

deporter commented 6 years ago

@chemitaxis Unfortunately I couldn't solve it using react-modal, so I used react-responsive-modal for this project, I prefer react-modal though, I just couldn't get around the issue and didn't have enough time to look into the code.

chemitaxis commented 6 years ago

Hi @deporter after looking the code, if you use this props just on ios, the problem is solved:

shouldFocusAfterRender={false}

Have a nice day!

enessoylu commented 5 years ago

Try adding sandox attribute to your iframe.