Position Element Above Mobile Keyboard

Question

I am trying to position an element directly above the mobile keyboard. i.e.: absolute / fixed position at the bottom of the page, but pushed by the keyboard (or pushes the equivalent height of the keyboard).

Usually this is the opposite behavior of the desired, and there should be many people who are fighting to preserve the lower elements. I feel like I remember fighting in the same battle before ...

But now that I want him to move, that’s not the case. (of course!)

I am currently focused on iOS Safari, but prefer a cross browser.

It seems that older versions of iOS changed window.innerHeight when the keyboard opened, for better or for worse. But this is no longer the case. Which can explain why I don’t see what I expect to see ...

I play with various positioned parent elements with no luck.

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

Answer 1

It's impossible. The keyboard seems to be its own side or, as you said, disconnected from the viewing area.

Answer 2

Although you cannot pinpoint an element on the keyboard. However, can I assume that you can use JavaScript and add a class that raises the fixed element to the same height as the keyboard.

Keyboard sizes can be found here: What is the height of the iPhone's on-screen keyboard?