I’m working on a chat app (Vue/Express) for Desktop/Mobile Devices and running into the usual iOS Safari issue: when the soft keyboard opens, it pushes the page content up. My layout requires that the chat and the input stay anchored at the bottom, so any shifting breaks the design.
I’ve tried the usual approach of using the virtual viewport’s top offset and translating the container back down, but it always results in slight jank. like its visible that you force to container to come back into place.
I came up with a different approach that I’ve only tested on a virtual iOS device so far:
I have a “fake” input (div[contenteditable]) for styled text input.
When the fake input is focused, I actually focus a real 1×1 pixel hidden at the top of the page (the page itself is not scrollable).
The fake input shows the cursor and mirrors whatever is typed into the hidden input.
In my tests, this prevents Safari/iOS from moving the body/html upward, because it seems to think the focused input is already in a visible and safe position, so no scrolling or body shifting occours.
Has anyone tried a similar proxy input approach? Does it work reliably in real devices, or are there pitfalls I should be aware of?
Thanks in advance!
I tryed the approach to monitor virtual viewport heights and offsets and animate the layout back into place. I don’t really liked it since it feels like you’re noticing the repositioning even with translate: none.
