Scroll a little until safari minimizes the address bar, and then click "Next". You can see the bottom bar is obscured. Try scrolling again, the bottom bar restores it's position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app');
const state = new Proxy(
{
currentPage: 1,
},
{
set(obj, key, value) {
if (key === 'currentPage') {
if (value === 1) app.innerHTML = Page1;
if (value === 2) app.innerHTML = Page2;
window.scrollTo(0, 0);
}
obj[key] = value;
return true;
},
}
);
const Stepper = `
<div class="fixed bottom-0 w-full justify-between flex px-10 left-0 right-0 h-20 bg-red-500">
<button onclick="setCurrentPage(state.currentPage - 1)">
Back
</button>
<button onclick="setCurrentPage(state.currentPage + 1)">
Next
</button>
</div>`;
const Page1 = `
<h1 class="text-7xl font-bold">You're currently on page 1</h1>
<div class="h-[1920px] w-full bg-grey-100"></div>
${Stepper}`;
const Page2 = `
<h1 class="text-7xl font-bold">You're currently on page 2</h1>
<div class="h-[1920px] w-full bg-grey-100"></div>
${Stepper}
`;
const setCurrentPage = (page) =>
(state.currentPage = Math.min(2, Math.max(1, page)));
setCurrentPage(state.currentPage);
</script>
</body>
</html>
See it in action here: https://streamable.com/shm9vd
Try it yourself: https://magnificent-horse-ecfe4e.netlify.app/
Is there a way to fix this? Thanks.
It works if you use a smooth scroll instead of an instant scroll.
window.scrollTo({ top: 0, behavior: 'smooth' });