[csswg-drafts] [css-values-4] Visual viewport units (#7194)

devongovett has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Visual viewport units ==
The new [viewport relative units](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) introduced recently are a great step forward. However, none of them correspond with the [VisualViewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) API in JavaScript. Specifically, when the software keyboard is visible, the `visualViewport.height` property changes accordingly, but e.g. `100dvh` does not.

This behavior is problematic when trying to build interfaces that are positioned above the on-screen keyboard, or resize so that they are always visible while the keyboard is open. Examples include chat UIs, commenting UIs, trays/sheets, modals containing forms, floating toolbars, etc.

I would like to propose another unit that corresponds exactly to what the VisualViewport API returns, but without requiring JavaScript. It is possible to accomplish this by setting a custom property from JS when the VisualViewport resize event occurs, but this approach has some drawbacks:

* It requires JavaScript. This seems like a common enough UI pattern to warrant a CSS-only solution.
* It does not adjust smoothly during keyboard open/exit animations. The VisualViewport API typically only fires a single resize event at the end of the transition. This can lead to janky user experience where UI components are incorrectly positioned or sized temporarily while the keyboard is opening or closing. I think the UA would need to be in charge of doing this animation for performance reasons, rather than dispatching a JS event every frame.

Possible names:

* `vvh` - i.e. visual viewport height
* `vvw`
* `vvmin` / `vvmax`

Has something like this been discussed in the past?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7194 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 1 April 2022 21:25:01 UTC