search

WICG / visual-viewport

A proposal to add explicit APIs to the Web for querying and setting the visual viewport
https://wicg.github.io/visual-viewport/
MIT License
177 stars 28 forks source link

Can't position 'relative' element just above keyboard #47

Open thehappycoder opened 7 years ago

thehappycoder commented 7 years ago

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 7 years ago

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 7 years ago

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

Malvoz commented 5 years ago

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: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046 and the following comment.