[csswg-drafts] [css-values-4] Large, small and dynamic viewport units (lvh, svh & dvh) don't solve top level horizontal scrolling use cases (#6551)

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

== [css-values-4] Large, small and dynamic viewport units (lvh, svh & dvh) don't solve top level horizontal scrolling use cases ==
Relevant Spec: https://drafts.csswg.org/css-values-4/#viewport-variants

Imagine an empty page styled with:

```
:root {
  width: 1000vw;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(to right, white, red);
}
```

Currently, on desktop it renders with only a horizontal scrollbar, like so:

![image](https://user-images.githubusercontent.com/14937611/131165507-d1bf5450-1621-4832-9321-7107285635d7.png)

But of course on mobile with retractable chrome, this is problematic:

![image](https://user-images.githubusercontent.com/14937611/131166165-e9156523-1fc4-4965-9cab-86b5bcee1684.png)

Ideally, this could be solved using a solution such as:

```
:root {
  height: 100lvh;
}
```

This would work on mobile; however, the spec currently states that:

> In all cases, scrollbars are assumed not to exist. Note however that the [initial containing block](https://drafts.csswg.org/css-display-3/#initial-containing-block)'s size _is_ affected by the presence of scrollbars on the viewport.

So on desktop, you'd get the frustrating effect of a horizontal scrollbar, like so:

![image](https://user-images.githubusercontent.com/14937611/131168715-67c43f5f-ecfc-4608-a73e-2d0991375284.png)

When used throughout the document, I understand the scrollbars limitation is for a good reason: https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-782958789. Irrespective of whether this general limitation can be overcome in level 4, surely the root element is a special case where a reasonable solution can be found? If not investigated now while a large number of new units are being specified, would it become too complex later?

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


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

Received on Friday, 27 August 2021 19:13:32 UTC