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?

Mayfly

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.

Diaphaneity

Answer 2

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

Hixson

Answer 3

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?

Procumbent

Thanks for the suggestion. That could be a reasonable solution, if there were some way to problematically get the height (with JS?). I think the variations with iOS version, device size, orientation and even custom extensions (like the giphy toolbar) make it a no-go. Even if I did nail it all down somehow, or find a happy medium, there'd be no hope with Android. I'm guessing there's no way to get the height tho. If there was, that would probably suggest the keyboard and dom interacting in such a way that would prevent this issue to begin with :( – Mayfly