[csswg-drafts] Cannot create element covering entire visual viewport (#8410)

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

== Cannot create element covering entire visual viewport ==
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:

```css
#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.

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


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

Received on Tuesday, 7 February 2023 10:38:00 UTC