Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lpd-au opened this issue Aug 27, 2021 · 1 comment

Comments

@lpd-au
Copy link

lpd-au commented Aug 27, 2021

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

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

image

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'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

When used throughout the document, I understand the scrollbars limitation is for a good reason: #6026 (comment). 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?

@tabatkins
Copy link
Member

Closing as a dupe of #6026, which has most of the discussion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants