Position element above mobile keyboard

Question

I'm trying to position an element directly above a mobile keyboard. ie: position absolute/fixed to bottom of page, but pushed up by the keyboard (or pushed up equivalent height of the keyboard).

Usually this is the opposite behavior of what's desired, and there's to be a lot of people fighting to keep bottom elements in place. I feel like I remember fighting those same battle before...

But now that I want it to move, it's not. (of course!)

My focus is iOS Safari for now, but would prefer cross browser.

It seems older versions of iOS changed window.innerHeight when the keyboard opened, for better or worse. But that's no longer the case. Which may explain why I'm not seeing what I expected to see...

I've been playing around with variously positioned parent elements with no luck.

Is this even possible? Or is the keyboard now completely detached from the viewport?

Answer 1

It's possible with VisualViewport API now to listen for the viewport change and read it values. In practice, it's not sending events immediately so the experience might be laggy.

Answer 2

It is not possible. The keyboard appears to be its own entity away, or as you said, detached from the viewport.