为何父元素设置backdrop-filter会改变fixed定位子元素位置？

这是实际开发中遇到的CSS定位异常场景：

• 初始状态父元素#block1未设置backdrop-filter属性时，内部设置了position: fixed的蓝色子块#block2正常显示在页面底部，初始代码如下：

#block1 {
    top: 0vh;
    height: 50vh;
    bottom: 0px;
    position: absolute;
    /*backdrop-filter: blur(10px);*/
}
#block2 {
    width: 50vw;
    bottom: 0px;
    position: fixed;
    height: 50vh;
    background: #2196F3;
}

<html>
<head></head>
<body>
<div id="block1">
    <div id="block2"></div>
</div>
</body>
</html>

• 仅给#block1添加backdrop-filter: blur(10px);属性、其余代码完全不变的情况下，原本固定在底部的蓝色块会偏移到页面上半部分，和预期表现不符。

这个表现是CSS规范明确定义的预设行为，不是浏览器bug：

• 常规状态下，position: fixed的元素默认以浏览器视口作为定位参考，这也是初始状态下#block2设置bottom: 0可以贴在页面最底部的原因。
• 按照CSS滤镜和定位模块的规范，当元素的backdrop-filter属性取值不是none时，该元素会自动生成新的包含块（containing block），所有内部的绝对定位、固定定位后代元素，都会改为相对于这个新的包含块做定位，不再以视口作为参考。
• 回到这个场景：设置了backdrop-filter的#block1本身是高度50vh的绝对定位元素，顶部对齐视口顶部，占据页面上半部分区域。此时内部#block2的bottom: 0就变成了对齐#block1的下边缘，自然就从原本的页面底部跑到了页面中间位置，看起来像是向上偏移到了顶部。

这个规则本质是为了保证滤镜效果的正确渲染：
backdrop-filter的作用是对元素背后的所有可见内容应用模糊、调色等滤镜效果，渲染时需要独立的层叠上下文和明确的边界计算范围。如果内部的fixed定位元素还能跳出父元素范围、相对于视口定位，会导致滤镜的计算区域出现错乱，出现渲染撕裂、效果漏算的问题，因此规范直接将这类会生成独立渲染层的属性定义为包含块触发条件，从规则层面避免渲染异常。

补充：不止backdrop-filter，transform非none、filter非none、perspective非none、will-change指定了上述属性、contain设为layout/paint/content值时，都会触发元素生成新的包含块，改变内部fixed元素的定位参考，开发时遇到类似定位异常可以优先排查这类属性。

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