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 is not possible. The keyboard appears to be its own entity away, or as you said, detached from the viewport.

Answer 2

Although you can't fix the element to the keyboard exactly, might I suggest that you may be able to use JavaScript and add a class that raises the fixed element the same height as the keyboard.

The keyboard sizes can be found here: What is the height of iPhone's onscreen keyboard?

Answer 3

It's possible withVisualViewport 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.