I have a Create React App with the following .env file:
BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false
When I launch the app with yarn start, after any code change, the server makes the replacement without refreshing page and discarding page state, but it injects an iframe in my HTML, with the max z-index, so I am unable to make any interaction, like a click.
The injected iframe is like:
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: medium none; z-index: 2147483647;"></iframe>
Is there any way to avoid this iframe or even it's giant z-index that is blocking all the page?
Found the root cause: This iframe is used by the hot loader to inject code in the DOM. It is appended and removed immediately after the injection. If an error occurs while this is happening, the hot loader breaks, not removing the iframe.
In my case, it was a Content-Security-Policy error causing an error during the injection.
Just adjusted my policies in my app and it's working fine now.