绝对定位嵌套元素中backdrop-filter: blur失效问题求助

问题描述 #

绝对定位的父元素（.content）设置backdrop-filter: blur后，为内部同样绝对定位的子元素（.absolute-inside-absolute）添加相同属性，父元素的模糊效果会被禁用；切换子元素的blur属性时，父元素的模糊效果会随之消失或恢复。

复现代码 #

HTML #

<div class="container">
  <div class="content">
    <div class="absolute-inside-absolute">
    </div>
  </div>
</div>

CSS #

.container{
  width: 100px;
  height: 100px;
  background: red;
  z-index: 100;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  left: 50px;
  top: 50px;
  position: absolute;
  background: linear-gradient(transparent, blue);
  z-index: 200;
  backdrop-filter: blur(70px);
}

.absolute-inside-absolute{
  width: 50px;
  height: 50px;
  left: -20px;
  top: -20px;
  z-index: 300;
  background: linear-gradient(green, transparent);
  position: absolute;
  backdrop-filter: blur(70px);
}

原因分析 #

这是浏览器渲染层叠上下文与backdrop-filter的特性导致的：当元素设置backdrop-filter时会创建新的层叠上下文，若子元素同样设置该属性且处于同一层叠上下文范围内，父元素的backdrop-filter会被子元素的渲染逻辑干扰，导致模糊效果无法正常显示。

解决方案 #

给父元素添加isolation: isolate属性，强制父元素创建独立的层叠上下文，避免子元素的backdrop-filter影响父元素的渲染：

.content {
  /* 原有属性保留 */
  isolation: isolate;
}

添加后，父子元素的backdrop-filter可同时生效，切换子元素的blur属性时，父元素的模糊效果不会再被禁用。

内容的提问来源于stack exchange，提问作者Dalvik