为何无关元素执行CSS动画时backdrop-filter: blur效果失效？

你遇到的问题确实是Chrome浏览器中backdrop-filter和带有transform/filter的动画元素之间的合成层渲染冲突导致的——即使官方宣称修复，部分边缘场景下仍会出现这类问题。以下是几个可行的解决办法：

方法1：强制导航栏进入独立合成层 #

给导航栏的父容器.header添加合成层触发属性，让浏览器单独渲染导航栏，避免被动画元素的渲染影响：

.header {
  position: fixed;
  left: 0;
  right: 0;
  /* 添加以下任一属性即可 */
  transform: translateZ(0);
  /* 或者用 will-change 更明确 */
  /* will-change: backdrop-filter; */
}

方法2：移除动画中的filter属性 #

动画里的filter: blur()是触发冲突的关键因素之一，因为导航栏也使用了滤镜相关的backdrop-filter。可以只保留opacity和transform实现淡入效果：

.fadeIn span {
  opacity: 0;
  /* 移除 filter: blur(12px); */
  transform: translateX(-20px) translateY(30px);
  animation: fadeIn 1s ease-out forwards;
  display: inline-block;
}

@keyframes fadeIn {
  to {
    /* 移除 filter: blur(0px); */
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

这种方法完全避开了滤镜冲突，同时动画效果几乎不受影响。

方法3：隔离动画元素的合成层 #

给动画元素的父容器.text添加isolation: isolate，隔离其渲染上下文，防止影响页面其他元素的滤镜效果：

.text {
  display: flex;
  margin: auto;
  padding: 0;
  isolation: isolate;
}

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