Repository navigation
Cannot create element covering entire visual viewport #8410
Description
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.
Activity
fantasai commentedon Jun 1, 2023
Does
work?
CendioOssman commentedon Jun 20, 2023
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 commentedon Nov 1, 2023
Glad to hear it. :)
@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 commentedon Nov 22, 2023
Further edits in this space: 5047246 and 79daa0a