search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.44k stars 657 forks source link

Cannot create element covering entire visual viewport #8410

Closed CendioOssman closed 10 months ago

CendioOssman commented 1 year ago

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 commented 1 year ago

Does

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

work?

CendioOssman commented 1 year ago

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.

fantasai commented 10 months ago

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

tabatkins commented 9 months ago

Further edits in this space: 504724653630e57f934be6fe3f11d3cf3eaae0a0 and 79daa0a8f380ba62123d03b36a2dfa65465ef569