背景过滤器无法与溢出配合使用:隐藏在父级上 [英] 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屋!