背景幕过滤器不适用于溢出:隐藏在父级上

Question

我正在尝试在div 上使用背景过滤器(在这种情况下为模糊(，只是为了发现溢出：隐藏属性阻止它应用。浏览器是Chrome 78。

假设我在div.block 中有一个div.filter，它是div.container 内的包装器。

div.container>div.block>div.filter

如果我应用溢出：隐藏到 .container 和 .block，过滤器的效果突然消失。此外，.block 的其他属性会阻止应用筛选器。

似乎溢出：隐藏在 .container 上会触发这种不稳定的行为。你们知道这里发生了什么吗？

演示：https://codepen.io/marcel_pi/pen/VwYvmGv

请检查以下代码：

.container{
overflow: hidden;  /* delete to resume normal behavior */
border-radius: 20px;
}
.block{
width: 400px;
height: 400px;
border: 4px solid black;
background: linear-gradient(90deg, transparent 50%, rgba(152,47,138,.5) 50%) antiquewhite;
background-size: 30px;
font-weight: bold;

/* the properties below prevent the filter from being applied once the overflow: hidden is applied to .container */

border-radius: 20px; /* delete to resume normal behavior */
overflow: hidden; /* delete to resume normal behavior */
position: relative; /* delete to resume normal behavior */
}
.filter{
position: absolute;
top: 0;
left: 205px;
width: 230px;
height: 230px;
background: #42add77d;
backdrop-filter: blur(6px); /* the blur filter */
border-radius: 20px;
}

<div class="container">

<div class="block">
<div class="filter"></div>
</div>
</div>

Answer 1

如果将过滤器 (0px( 应用于应用溢出属性的同一元素，它将起作用。

.container{
overflow: hidden;  /* delete to resume normal behavior */
border-radius: 20px;
}
.block{
width: 400px;
height: 400px;
border: 4px solid black;
background: linear-gradient(90deg, transparent 50%, rgba(152,47,138,.5) 50%) antiquewhite;
background-size: 30px;
font-weight: bold;

/* the properties below prevent the filter from being applied once the overflow: hidden is applied to .container */

-webkit-filter: blur(0px);
border-radius: 20px; /* delete to resume normal behavior */
overflow: hidden; /* delete to resume normal behavior */
position: relative; /* delete to resume normal behavior */
}
.filter{
position: absolute;
top: 0px;
left: 205px;
width: 230px;
height: 230px;
background: #42add77d;
backdrop-filter: blur(4px);
border-radius: 20px;
}

<div class="container">

<div class="block">
<div class="filter"></div>
</div>
</div>

您也可以在此处进行测试。

Answer 2

这是一个堆叠顺序问题。如果对z-indexblock元素执行简单的添加测试，您将看到筛选器按预期工作。

我对overflow及其属性如何影响堆叠顺序进行了一些挖掘，但找不到任何结论性文档。

也就是说，只需将z-index: 1添加到您的block中即可。

警告：这在 Firefox 上不起作用，除非您在 about：config 中将 layout.css.backdrop-filter.enabled 首选项设置为 true。

https://caniuse.com/#search=backdrop-filter

.container {
overflow: hidden;
/* delete to resume normal behavior */
border-radius: 20px;
}
.block {
width: 400px;
height: 400px;
border: 4px solid black;
background: linear-gradient(90deg, transparent 50%, rgba(152, 47, 138, .5) 50%) antiquewhite;
background-size: 30px;
font-weight: bold;
border-radius: 20px;
overflow: hidden;
position: relative;
z-index: 1;
}
.filter {
position: absolute;
top: 0px;
left: 205px;
width: 230px;
height: 230px;
background: #42add77d;
backdrop-filter: blur(4px);
border-radius: 20px;
z-index: 10;
}

<div class="container">
<div class="block">
<div class="filter"></div>
</div>
</div>

Answer 3

Chrome 中有一些错误与filter/backdrop-filter、border-radius和overflow: hidden

：

• 2013 年 5 月(Chrome 27(提问：webkit-filter 中断溢出：隐藏

• 2016 年 4 月被问到：背景滤镜超出了边界半径。

  应该已经修复了：https://bugs.webkit.org/show_bug.cgi?id=142662。

对我来说，唯一不起作用的属性是.block的overflow: hidden，但您可以将其删除，定位.filter，使其不会溢出，并将其border-radius仅应用于需要它的角落(在本例中为border-radius: 0 4px 0 16px(：

body {
display: flex;
justify-content: center;
margin: 0;
height: 100vh;
}
.container {
position: relative;
box-sizing: border-box;
flex: 1 1 100%;
margin: 16px;
padding: 16px;
border: 4px solid black;
border-radius: 12px;
overflow: hidden;
}
.block {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 4px solid black;
border-radius: 8px;
background: linear-gradient(90deg, transparent 50%, rgba(152,47,138,.5) 50%) antiquewhite;
background-size: 20px 20px;
font-weight: bold;

/* This is the only one what won't work: */
/* overflow: hidden; */
}
.filter {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
background: #42ADD77D;
backdrop-filter: blur(4px);

/*
Add border-radius only top right corner (which should match the parent's border-radius minus its
border-width) and bottom left corner:
*/

border-radius: 0 4px 0 16px;
}

<div class="container">
<div class="block">
<div class="filter"></div>
</div>
</div>

我在Windows 10上使用ChromeVersion 78.0.3904.108 (Official Build) (64-bit)。