Windows平台Chrome中backdrop-filter过渡时出现深色内嵌边框问题

编辑说明： 截至Chrome版本119.0.6045.200，该问题已在Chrome自身中得到修复

在backdrop-filter的过渡动画期间，会出现深色内嵌阴影，且仅在过渡过程中可见。
该问题仅出现在Windows 10/11系统的Chrome/WebKit内核浏览器中，测试使用的Chrome版本为：Version 116.0.5845.190 (Official Build) (64-bit)

• 该问题在Stack Overflow内嵌的「运行代码片段」中会复现
• 在Stack Overflow的代码片段编辑器中不会出现
• 实际项目中也能观察到这些内嵌边框

我希望消除这些内嵌边框，这是代码问题还是浏览器的非预期/未定义行为？

示例 #

效果对比 #

• Chrome异常效果：
  
• Firefox正常效果：
  

示例代码 #

在Chrome中点击按钮会触发黑色内嵌边框问题，代码如下：

<button onclick="toggle()">toggle backdrop-filter: blur(5px)</button>
<div class="container">
  <div class="text">
    Hello!
  </div>
  <div class="inner">
  </div>
</div>

.inner {
  margin: 20px;
  padding: 10px;
  width: 100%;
  height: 200px;
  display: inline-block;
  border: 2px solid white;
  border-bottom: 2px solid rgba(0, 0, 0, .1);
  box-sizing: border-box;
  transition: backdrop-filter 500ms;
}

.blurred {
  backdrop-filter: blur(5px);
}

.text {
  position: absolute;
  left: 20%;
  top: 20%;
  font-size: 40px;
  color: white;
  font-family: sans-serif;
  margin: 20px;
  padding: 10px;
  width: 100%;
  height: 200px;
  display: inline-block;
  box-sizing: border-box;
}

.container {
  margin: 10px;
  display: flex;
  position: relative;
  background: linear-gradient(135deg, #57cdff, #05a915);
}

function toggle() {
  document.getElementsByClassName("inner")[0].classList.toggle('blurred')
}

结论 #

这是Chrome/WebKit内核浏览器在特定版本下的非预期渲染Bug，并非代码问题。目前官方已在Chrome 119.0.6045.200及以上版本修复该问题，建议升级浏览器至最新版本即可解决。

若暂时无法升级，可尝试临时解决方案：

1. 移除border-bottom的半透明设置，改用不透明颜色
2. 替换backdrop-filter的过渡动画实现方式（比如通过伪元素模拟模糊效果并过渡）

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