I study react application with Typescript. my problem is unknown HTML iframe HTML element shows up outside the id="root" element in body element of index.html of public folder of the application when the development server is working. Its z-index block all input of the mouse on the application. How can I remove this? could you help me?
rendering file
ReactDOM.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>,
document.getElementById('root')
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Unknown element in index.html when development server is working.
<body>
<div id="root"></div>
<iframe style="position: fixed; top: 0px;
left: 0px; width: 100%;
height: 100%; border: none;
z-index: 2147483647;">
</iframe>
</body>
I am facing same problem in my local development machine. I solved this problem. But my solution is a brute-force solution (not ideal or actual solution). I used this css globally.
iframe {
display: none !important;
}
