I’m engaged on a chat app (Vue/Categorical) for Desktop/Cell Units and working into the same old iOS Safari problem: when the smooth keyboard opens, it pushes the web page content material up. My format requires that the chat and the enter keep anchored on the backside, so any shifting breaks the design.
I’ve tried the same old method of utilizing the digital viewport’s prime offset and translating the container again down, nevertheless it at all times leads to slight jank. like its seen that you simply pressure to container to come back again into place.
I got here up with a distinct method that I’ve solely examined on a digital iOS system thus far:
I’ve a “pretend” enter (div[contenteditable]) for styled textual content enter.
When the pretend enter is concentrated, I really focus an actual 1×1 pixel hidden on the prime of the web page (the web page itself isn’t scrollable).
The pretend enter reveals the cursor and mirrors no matter is typed into the hidden enter.
In my assessments, this prevents Safari/iOS from shifting the physique/html upward, as a result of it appears to suppose the centered enter is already in a visual and secure place, so no scrolling or physique shifting occours.
Has anybody tried the same proxy enter method? Does it work reliably in actual gadgets, or are there pitfalls I ought to pay attention to?
Thanks prematurely!
I tryed the method to observe digital viewport heights and offsets and animate the format again into place. I do not actually preferred it because it feels such as you’re noticing the repositioning even with translate: none.
