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!
0
0
146