父子组件之间互相影响backdrop-filter的css效果

一、遇见的问题：

当父组件使用了backdrop-filter的设置，子组件也想配置这个属性的时候，效果会受到影响，我遇到的是子组件不生效，不知道会不会出现别的情况。

UI现在很爱使用backdrop-filter这个设计，以前没发现啥问题，开始做地图以后，面板后面挂了一张地图，父子组件之间关于这个效果的影响就格外明显了。

如图：

很明显预警模块这个子组件的backdrop-filter并没有生效。

二、解决方案：

1. 简单粗暴的拆开他们的父子组件关系，就不得相互影响了。但是这个得涉及到改一些布局，有时候改起来会觉得有点烦躁。
2. 在子组件上使用使用伪元素，将backdrop-filter的毛玻璃效果使用到伪元素上，这样子组件的背景就不会受到影响。
3. 完美方案： 让UI别用这个效果了，又消耗性能~

第二个解决方案，我在使用的过程中出现了，子组件的所有内容都被毛玻璃覆盖。如图：

这个的解决方案是在伪元素上调整z-index保证确保它在内容后面渲染。

代码如下

.leftPanel { // 父组件
    width: 335px;
    height: calc(100% - 40px);
    box-sizing: border-box;
    position: absolute;
    top: 24px;
    left: 24px;
    box-shadow: 0px 0px 16px 0px rgba(127, 135, 151, 0.13);
    border-radius: 8px;
    background: var(--cardBg);
    color: var(--cardColor) !important;

    backdrop-filter: blur(10px);


    // 子组件
    .alert-info-wrapper {
        position: absolute;
        left: 360px;
        top: 70px;
        z-index: 0;
    }
    .alert-info-wrapper::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: var(--cardBg);
        top: 0;
        right: 0;
        backdrop-filter: blur(10px);
        z-index: -1;
    }
}

三、最后效果：