为什么backdrop-filter与mask-image同时使用时模糊效果会失效？

现有一个设置了mask-image属性的容器div，内部包含两个设置了backdrop-filter属性的子div，对应实现代码如下：

HTML结构 #

<div class="scroll-view">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

样式代码 #

body {
  background-image: url("https://images.unsplash.com/photo-1653744971341-ae4a77618399?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYzODM1OTM&ixlib=rb-1.2.1&q=80");
}

.scroll-view {
  width: 300px;
  height: 450px;
  border: 1px solid red;
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  overflow-y: scroll;
}
.inner {
  backdrop-filter: blur(10px);
  width: 200px;
  height: 200px;
  margin: 50px;
  border: 1px solid green;
  background: rgba(255, 255, 255, 0.2);
}

预期与实际表现差异 #

• 预期效果：滚动子元素时，子元素在容器上下边缘呈现渐隐效果，同时子元素区域下方的页面背景会被模糊处理。
• 实际表现：容器设置mask-image属性时，backdrop-filter的模糊效果完全不生效；注释掉mask-image相关代码后，模糊效果可正常显示。

该现象是浏览器渲染合成规则与CSS属性设计逻辑共同导致的，不属于浏览器bug，目前所有主流内核浏览器均存在该表现：

1. 当元素设置mask-image（含-webkit-前缀版本）属性时，浏览器会为该元素创建独立的隔离渲染上下文，所有子元素的渲染计算都会被限制在这个上下文边界内，无法直接读取上下文外部的像素数据。
2. backdrop-filter的模糊效果实现逻辑，是采样目标元素Z轴下方所有层级的像素内容做滤波计算。当带backdrop-filter的子元素处于父元素创建的mask隔离上下文内部时，它的采样范围会被父元素的上下文边界截断，无法获取到父元素外部的body背景像素，最终表现为模糊效果完全失效。

• 结构拆分方案：额外新增一层外层容器，将mask-image属性设置在外层容器上，原滚动容器作为外层容器的子元素，保持滚动逻辑和子元素的backdrop-filter属性不变。该方案下外层mask只负责最终显示结果的渐隐裁切，不会隔离内部元素的backdrop-filter采样源，可同时实现渐隐和模糊效果。
• 模拟遮罩方案：放弃使用mask实现边缘渐隐，改为在滚动容器上下边缘叠加两个和背景同渐变的固定定位遮罩层，模拟滚动渐隐效果。该方案完全不会触碰渲染层隔离逻辑，对backdrop-filter效果无任何影响，兼容性最好。
• 属性调整方案：尝试通过设置isolation: auto、调整mask-clip属性值放宽渲染隔离范围，但该方案目前兼容性差，不同内核浏览器表现不一致，不推荐生产环境使用。

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