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.

Sign up for GitHub

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

Jump to bottom

Cannot create element covering entire visual viewport #8410

Closed
CendioOssman opened this issue Feb 7, 2023 · 4 comments
Closed

Cannot create element covering entire visual viewport #8410

CendioOssman opened this issue Feb 7, 2023 · 4 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-position-3 Current Work css-values-4 Current Work

Comments

@CendioOssman
Copy link

A common pattern is that a page needs to open something modal (e.g. a cookie dialog), and hence wants to mask off the normal content. The obvious way to do this would be:

#mask_layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 40%);
  backdrop-filter: blur(4px);
}

This works fine, until the visual viewport is larger than the layout viewport. At that point you'll see some of the background page to the right and at the bottom.

There were some discussion on #7194 about adding new units for the visual viewport, but that was rejected.

So what would be the proper way to handle this scenario?

Using <meta name="viewport" content="minimum-scale=1.0"> partially prevents the problem. But browsers ignore this when they are in "desktop site" mode.
@fantasai
Copy link
Collaborator

fantasai commented Jun 1, 2023

Does

#mask_layer {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 40%);
  backdrop-filter: blur(4px);
}

work?

@fantasai fantasai added the css-position-3 Current Work label Jun 1, 2023
@CendioOssman
Copy link
Author

Yes, that seems to work nicely. Thanks.

Tested in Firefox and Edge on Android. I would assume Chrome also works then.

Is this documented somewhere? Everything seems to be based on the "initial containing block", which I can't find a clear definition of. It seems to be something above the root element (which matches testing, as my <html> element is smaller than what the mask layer above covers.

There appears to be some discussion on #5218, #5777 and #6453.

@CendioOssman CendioOssman mentioned this issue Jun 20, 2023
Closed
@tabatkins tabatkins added the css-values-4 Current Work label Oct 27, 2023
@tabatkins tabatkins mentioned this issue Oct 27, 2023
Closed
@fantasai
Copy link
Collaborator

fantasai commented Nov 1, 2023

Yes, that seems to work nicely. Thanks.

Glad to hear it. :)

Is this documented somewhere? Everything seems to be based on the "initial containing block", which I can't find a clear definition of.

@CendioOssman It's documented here: https://www.w3.org/TR/css-display-3/#initial-containing-block
See: https://www.w3.org/TR/css-position-3/#def-cb
and also here: https://www.w3.org/TR/CSS2/visudet.html#containing-block-details

@fantasai fantasai added the Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. label Nov 1, 2023
@fantasai fantasai closed this as completed Nov 1, 2023
@tabatkins
Copy link
Member

Further edits in this space: 5047246 and 79daa0a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-position-3 Current Work css-values-4 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tabatkins @fantasai @CendioOssman