WICG/visual-viewport

Can't position 'relative' element just above keyboard

Opened this issue · 3 comments

thehappycoder commented

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 commented

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 commented

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

Malvoz commented

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.