This content originally appeared on DEV Community and was authored by christian xyz
Hi everyone,
I’m working on a one-page website and I’ve run into a strange mobile Safari / iOS bug that I can’t solve.
The problem
On desktop everything works fine.
On mobile Safari (iPhone), as soon as I tap into any input field (contact form or modal form), the layout starts breaking:
The navbar (fixed header) scrolls away when it should stay pinned.
When I scroll back up, the navbar reappears but the hero header/logo keeps drifting down instead of returning to its position.
After that, the layout remains broken until I open the site in a new tab. Even refreshing the page does not fix it.
What I tried
Removed all JavaScript → problem persists.
Changed position: fixed / sticky in CSS → problem persists.
Tried using 100vh and 100dvh for hero section → same issue.
Disabled transitions and animations → still happens.
So it looks like it’s directly related to iOS viewport changes when the keyboard opens, but I can’t pin down the exact fix.
Demo
https://imgur.com/a/Zpi6s44Question
Website
florasweets.de
Has anyone seen this behavior before on iOS Safari?
Is there a CSS-only hack (e.g. avoiding 100vh, using flex layouts, etc.) or do I need a JavaScript workaround to detect when the keyboard is open?
How do you normally prevent navbars and hero headers from drifting like this after an input gets focus?
Any hints or proven patterns would be super appreciated 🙏
Thanks!
This content originally appeared on DEV Community and was authored by christian xyz
christian xyz | Sciencx (2025-09-29T08:50:03+00:00) Mobile bug: Navbar and header jump after focusing input fields. Retrieved from https://www.scien.cx/2025/09/29/mobile-bug-navbar-and-header-jump-after-focusing-input-fields/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.