I have a fixed layout for my website with a header, main content, and footer. I am using Tailwind CSS for the front-end stylings. Despite implementing various solutions found on Stack Overflow, such as setting meta tags and window events, I’m still unable to hide the iOS Safari address bar when scrolling down on an iPhone.
I have created a codesandbox demo for your reference.
Here’s a simplified version of my HTML structure:
<div class="antialiased relative">
<!-- header -->
<div id="headerMobile" class="fixed left-0 top-0 right-0 z-10 w-full py-1 px-3 shadow-[0_4px_6px_0_rgba(141,159,207,0.16)] bg-blue-200" style="height: 42px;">
<header class="flex justify-between items-center">
<button>Menu</button>
<h1>Website Name</h1>
<div class="relative flex justify-between items-center">Profile</div>
</header>
</div>
<!-- main content -->
<main class="fixed right-0 left-0 z-0 flex flex-row justify-center" style="height: calc(100vh-44px-69px); bottom: 68px; top: 44px; overflow-y: scroll;">
<!-- Content here -->
</main>
<!-- footer -->
<div id="footerMobile" class="fixed bottom-0 left-0 right-0 z-1 w-full py-2 px-10 flex justify-between items-center shadow-[0_4px_6px_0_rgba(141,159,207,0.16)] bg-red-300 border-t-2 border-t-[rgba(141,159,207,0.16)]" style="height: 67px;">
<a href="/">Home</a>
<a href="/search">Search</a>
<a href="/rankings">Ranking</a>
</div>
</div>
Additionally, I’ve applied the following CSS styles:
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins";
overscroll-behavior-y: none;
overflow-y: hidden;
}
*,
body,
html {
margin: 0;
padding: 0;
}
I’ve tried hiding the iOS Safari address bar using solutions like those suggested in the following Stack Overflow threads:
How do I hide the address bar on iPhone?
iOS Safari top and bottom bar issue
However, despite these attempts, the address bar remains visible when scrolling down. How can I properly hide the iOS Safari address bar in my fixed layout when scrolling downward on an iPhone? Any insights or alternative solutions would be greatly appreciated. Thank you!