背景过滤器不适用于Chrome中的嵌套元素 [英] backdrop-filter not working for nested elements in Chrome

问题描述

我有一个 div.outer 和一个 div.inner 内部，都具有 position:absolute; 和 backdrop-filter:blur(8px); .

我有一个解决方案:在 div.outer 内添加另一个div，然后将 backdrop-filter:blur(8px); 移至新的div.

但是，我希望得到一个不需要从第一个jsbin更改DOM的解决方案.另外，有人知道这是什么原因吗?这是Chrome的错误吗?

https://jsbin.com/rasudijame/1/edit?html，CSS，输出

PS:它可以在iOS的Chrome上运行，但不能在Android的Chrome上运行，也不能在Mac OS的Chrome上运行

解决方案

将背景滤镜放在CSS伪元素上.这允许嵌套的背景滤镜.您也可以使用 z-index:-1; 将背景幕放置在图元后面

  div {高度:100px；宽度:100px；}.wrapper {位置:绝对；}.outer，.inner {职位:相对}.outer :: before {内容: '';位置:绝对；宽度:100％;高度:100％;-webkit-backdrop-filter:blur(8px);背景过滤器:blur(8px);}.outer {背景:rgba(255，0，0，.5);}.inner :: before {内容: '';位置:绝对；宽度:100％;高度:100％;-webkit-backdrop-filter:blur(8px);背景过滤器:blur(8px);}.inner {背景:rgba(0，0，255，.5);顶部:50px；左:50px；}主要的 {职位:相对} 

 < main>< div class =包装器">< div class =外部">< div class =内部"</div</div></div>< p> Lorem ipsum dolor坐着，安全地服从精英.Accuaccus in quos，est voluptatibus减去porro sunt totam quod commodi odt maxime similique，dolorum aut quoque.德莱尼蒂(Voluptas animi).< p> Lorem ipsum dolor坐着，安全地服从精英.Accuaccus in quos，est voluptatibus减去porro sunt totam quod commodi odt maxime similique，dolorum aut quoque.德莱尼蒂(Voluptas animi).< p> Lorem ipsum dolor坐着，安全地服从精英.Accuaccus in quos，est voluptatibus减去porro sunt totam quod commodi odt maxime similique，dolorum aut quoque.德莱尼蒂(Voluptas animi).< p> Lorem ipsum dolor坐着，安全地服从精英.Accuaccus in quos，est voluptatibus减去porro sunt totam quod commodi odt maxime similique，dolorum aut quoque.德莱尼蒂(Voluptas animi).< p> Lorem ipsum dolor坐着，安全地服从精英.Accuaccus in quos，est voluptatibus减去porro sunt totam quod commodi odt maxime similique，dolorum aut quoque.德莱尼蒂(Voluptas animi).</main> 

这是 codepen

I have a div.outer and inside a div.inner, both with position: absolute; and backdrop-filter: blur(8px);.

https://jsbin.com/nihakiqocu/1/edit?html,css,output

Safari (left) gives the desired result – both divs blur what's behind them.

Chrome (right), however, only applies the blur of div.outer:

I have a solution: adding another div inside div.outer and moving backdrop-filter: blur(8px); to that new div.

However, I would appreciate a solution that doesn't require changing the DOM from the first jsbin. Also, does anybody know what is causing this – is it a Chrome bug?

https://jsbin.com/rasudijame/1/edit?html,css,output

PS: it works on iOS's Chrome, but not on Android's Chrome and also not on Mac OS's Chrome

解决方案

Place the backdrop filter on css pseudo element. This allows nested backdrop filters. Also you can use z-index: -1; to position your backdrop behind your elemets

div {
  height: 100px;
  width: 100px;
}
.wrapper {
  position: absolute;
}
.outer, .inner {
  position: relative;
}
.outer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.outer {
  background: rgba(255, 0, 0, .5);
}
.inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  
}
.inner {
  background: rgba(0, 0, 255, .5);
  top: 50px;
  left: 50px;
}
main {
  position: relative;
}

<main>
  <div class="wrapper">
    <div class="outer">
      <div class="inner"></div>
    </div>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
</main>

And here is codepen

这篇关于背景过滤器不适用于Chrome中的嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！