背景过滤器无法与溢出配合使用:隐藏在父级上 [英] Backdrop filter not working with overflow: hidden on parent

问题描述

我试图在div上使用background-filter(在这种情况下为blur)只是为了发现溢出:hidden属性阻止了它的应用.浏览器是Chrome 78.

I'm trying to use backdrop-filter(blur in this case) on a div only to discover the overflow: hidden property prevents it from applying. The browser is Chrome 78.

说我在div.block内有一个div.filter，它是div.container内的包装器.

Say I've got a div.filter inside a div.block that's wrapper inside a div.container.

div.container> div.block> div.filter

div.container > div.block > div.filter

如果我应用溢出:对.container和.block都隐藏，则过滤器的效果突然消失.此外，.block的其他属性会阻止应用过滤器.

If I apply overflow: hidden to both .container and .block the effect of the filter suddenly disappears. Furthermore, other properties of the .block prevents the filter from being applied.

似乎像是溢出:隐藏在.container上触发了这种不稳定的行为.你们知道这里发生了什么吗?

Seems like the overflow: hidden on .container triggers this erratic behavior. Do you guys have any idea what's going on here?

此处演示: 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>

推荐答案

Chrome中的 filter / backdrop-filter ， border-radius有一些错误和溢出:隐藏:

There were some bugs in Chrome with filter / backdrop-filter, border-radius and overflow: hidden:

• 要求于2013年5月(Chrome 27): webkit-filter中断溢出:隐藏

于2016年4月提出要求:背景滤镜超出了边界半径.

Asked in April 2016: Backdrop Filter extends beyond Border Radius.

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

对我来说，唯一不起作用的属性是 .block 的 overflow:隐藏，但是您可以将其放置在 .filter ，这样它就不会溢出并且仅将其 border-radius 应用于需要它的角(在此示例中， border-radius:0 4px 0 16px ):

For me, the only property that is not working is .block's overflow: hidden, but you can just remove it, position .filter so that it doesn't overflow and apply its border-radius only to the corners that need it (in this example, 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 版本78.0.3904.108(正式版本)(64位).

I'm using Chrome Version 78.0.3904.108 (Official Build) (64-bit) on Windows 10.

这篇关于背景过滤器无法与溢出配合使用:隐藏在父级上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！