Hi,
I’m experiencing a persistent issue with the iOS on-screen keyboard in mobile Safari.
My website (built with PHP, but the issue is clearly on the frontend) has a fixed header (position: fixed; top: 0). However, when a user focuses on an input field and the keyboard opens, the entire viewport shifts upward.
No matter what I try, the keyboard seems to push everything up:
The header does not stay fixed at the top of the screen In some cases, it briefly stays, then animates/jumps as if trying to reposition itself It feels like the whole layout is being moved rather than just the visible area adjusting
I’ve already tried:
Removing transforms on the header Forcing position: fixed with top: 0 Avoiding 100vh Testing without custom JavaScript related to viewport handling
But the behavior remains the same: opening the keyboard causes the entire layout to shift.
Is this expected behavior due to how iOS handles the visual viewport? Is there a reliable way to keep a fixed header truly fixed when the keyboard appears?
Any insight or recommended approach would be greatly appreciated.
Thanks!