Re: [csswg-drafts] [css-values-4] Add vhc value (#4329)

I'm a fan of the new units, I think they make sense as spec'ed. I think the complaints I'm seeing about proliferation of CSS units are understandable, but currently 100vh isn't useable on mobile without a bunch of additional work.

However, I don't think this problem can be solved in a satisfactory way without also dealing with the visible viewport when the on-screen keyboard appears. Today iOS browsers display the on-screen keyboard over the bottom of the viewport, and Android/Chrome shrinks the viewport to appear over the keyboard.

To provide a concrete example, if you were to define this CSS class:

```css
.bottomQuarter {
  position: fixed;
  top: 75dvh;
  height: 25dvh;
  width: 100vw;
}
```

It would be hidden by the on-screen keyboard on iOS, and would appear above the keyboard on Android/Chrome. The same problem occurs if you define it using:

```css
.bottomQuarter {
  position: fixed;
  bottom: 0;
  height: 25dvh;
  width: 100vw;
}
```

Or using units available today:

```css
.bottomQuarterish {
  position: fixed;
  bottom: 0;
  height: 25vh;
  width: 100vw;
}
```

For additional background/sympathy: To workaround the browser chrome retraction and on-screen keyboard issues today I use the `window.visualViewport.resize` event (when supported, otherwise `window.resize`), and set CSS variables that are equivalent to `dvh/dvb`. I also detect viewport resizes, determine if they look like a "keyboard is showing/hiding" resize, then check whether an input or text area is active (to classify it as a keyboard resize); and then I compare a hidden 100vh element to the viewport height to determine if a `--keyboard-height` CSS var needs to be set on iOS so that elements that should appear above the keyboard need to be adjusted vertically.

In short, for this to be useful, we also need something like `env(keyboard-height)` and `env(keyboard-active)` variables.

-- 
GitHub Notification of comment by johncrim
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-865304218 using your GitHub account


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

Received on Monday, 21 June 2021 19:59:23 UTC