html - 背景过滤器不适用于 Chrome 中的嵌套元素

Question

我有一个 div.outer并在 div.inner 内, 都与 position: absolute;和 backdrop-filter: blur(8px); .

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

Safari(左)给出了想要的结果——两个 div 都模糊了它们背后的东西。

然而，Chrome(右)仅应用 div.outer 的模糊效果。 :



我有一个解决方案:在 div.outer 中添加另一个 div和移动 backdrop-filter: blur(8px);到那个新的div。

但是，我希望有一个不需要从第一个 jsbin 更改 DOM 的解决方案。另外，有没有人知道是什么原因造成的——这是一个 Chrome 错误吗？

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

PS:它适用于 iOS 的 Chrome，但不适用于 Android 的 Chrome，也不适用于 Mac OS 的 Chrome

Answer 1

将背景过滤器放在 css 伪元素上。这允许嵌套背景过滤器。您也可以使用 z-index: -1;将背景放置在元素后面

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>

这里是 codepen