react: useEffect fails to fire when hosted in display:none iFrame
Do you want to request a feature or report a bug?
Bug starting at React version 16.9.0
What is the current behavior?
React version 16.8.6: If a react app was hosted in an iFrame and that iFrame was in a display:none style, the useEffect hook would trigger.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
React version 16.9.0: If a react app using this version is hosted in an iFrame and that iFrame is set to display:none the useEffect hook is never fired.
A CRA app with a very simple useEffect hook is created and hosted here: https://github.com/Kikketer/use-effect-none
The static hosted page is here: https://kikketer.github.io/use-effect-none/
The codesandbox that has this iFrame with display:none can be found here: https://codesandbox.io/embed/react-innerframe-tezku
What is the expected behavior?
The useEffect hook should be fired even if the app is hosted in a display:none iFrame.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Firefox, Chrome, Edge (77x on mac) with React 16.9.0 both fail to run useEffect on this iFrame
Safari with React 16.9.0: Does run the useEffect on this iFrame
IE (windows or 11): unknown
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 6
- Comments: 15 (2 by maintainers)
I have a likely related issue, but it is Firefox only. Given this repro here:
https://codesandbox.io/s/react-from-parent-frame-useeffect-bug-jpp72
useEffect only fires in Chrome, but not in firefox. The gist is that we’re pulling React from another frame, which is hidden. We’re doing this to save parse/eval time of React on frames that come and go from an iframe based application plugin. I don’t know if this is an officially supported use of React (sharing React and ReactDOM across frames) but it appears to work just fine aside from this case.