When accessing my React front end in Mobile Chrome browsers, I noticed that the div at the bottom only renders after moving or refreshing the page. Interestingly, it works perfectly fine once cached. However, on the initial load (especially when using incognito mode), the div is not visible.
In contrast, Mobile Firefox displays the div immediately but requires adjustment when the URL bar disappears to maintain its position at the bottom, resulting in a slightly glitchy appearance.
Anchoring the div to the top works seamlessly across all browsers despite using the same codebase. My development setup includes a Docker container for React deployed via Node.js and Vite.js, with local development being conducted.
I have invested significant time trying to troubleshoot this issue without success. Any assistance or suggestions would be greatly appreciated - thank you!
<!doctype html>
<html lang="en">
<head>
<script type="module">import { injectIntoGlobalHook } from "/@react-refresh";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx?t=1707096700138"></script>
</body>
</html>
lang-jsx
import "./App.css";
function App() {
return (
<>
<div style={{
position: 'sticky',
top: 0,
minWidth: '100%',
}}>Header</div>
<div style={{
minWidth: '100%',
minHeight: '100vh',
}}>SOME CONTENT</div>
<div style={{
minWidth: '100%',
minHeight: '100vh',
}}>SOME CONTENT</div>
<div style={{
position: 'fixed',
bottom: 0,
minWidth: '100%',
}}>Footer</div>
</>
);
}
export default App;
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
Various attempts like utilizing animations, sticky positioning, and other methods were made to resolve the issue but to no avail. The div does not appear in developer tools on desktop either, complicating UI creation. Despite simplifying the app components, the problem persists.