How to make fixed elements respect the virtual keyboard on iOS
Apple likes to "think different" (and tell us about it too).
Sometimes this leads to cool stuff, and other times it results in position: fixed elements that get hidden behind the virtual keyboard on iOS... No matter how hard you try to coerce them ot...
saricden.com2 min read
Simon
I was really hopeful that your code example would work, but unfortunately it fails quite horribly on iOS Safari once the keyboard is opened up. The div that should be fixed to the bottom ends up all over the place - sometimes out of view, and sometimes in the center of view.
Here's the example: simoneast [dot] net/TEMP/keyboard-viewport-example/ (tap on the input box to activate the keyboard)
Unfortunately this appears to be very difficult to fix without introducing stuttering and glitchyness. If you have any other suggestions or discoveries, I would love to know.
(I'm testing on iOS 17.4.1)