Can't position 'relative' element just above keyboard

[thehappycoder]

In Chrome 61 running on Samsung S7:

window.outerHeight is 310
viewport.height is 310

So I can't set bottom = of my relatively positioned element.

[bokand]

The keyboard in Chrome today fully resizes the entire window, not just the visual viewport. So if you want to keep something above the keyboard, position: fixed, bottom: 0 will work.

There's an experimental flag (chrome://flags/#enable-osk-overscroll) that will cause the keyboard to resize only the visual viewport. In that case, window.inner/outerHeight won't change and you can use the difference with visualViewport.height to shift the element up. However, that's still experimental and it's not clear whether or not it will ship in this state.

[thehappycoder]

Thank you @bokand
Unfortunately, I can't make it fixed.

[Malvoz]

If the browser UI properties could be exposed as CSS environment variables, we could use CSS to account for e.g. the keyboard height, see: w3c/csswg-drafts#2630 (comment) and the following comment.