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

Question

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

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

div.container > div.block > div.filter

如果我对 .container 和 .block 应用 overflow: hidden ，过滤器的效果会突然消失。此外，.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

filter/backdrop-filter、border-radius 和 overflow: hidden 在 Chrome 中存在一些错误：

• 2013 年 5 月问（Chrome 27）：webkit-filter breaks overflow: hidden

• 2016 年 4 月提问：Backdrop Filter extends beyond Border Radius。

  应该已经修复：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 上使用 Chrome Version 78.0.3904.108 (Official Build) (64-bit)。

Answer 2

这是堆叠顺序问题。如果您做一个简单的测试，将z-index 添加到您的block 元素，您将看到过滤器按预期工作。

我对@9​​87654324@ 以及它的属性如何影响堆叠顺序进行了一些挖掘，但找不到任何确凿的文档。

也就是说，只需将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

如果您将过滤器 (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>

你也可以测试一下here..