背景滤镜模糊的过渡导致深色插入边框（仅限 Chrome 和 Windows）

Question

在背景过滤器上的过渡过程中，我注意到一个黑暗的插入阴影，仅在过渡期间可见。

这似乎只发生在 windows（10 和 11）上基于 chrome/webkit 的浏览器中：
我当前的 chrome 版本是：“版本 116.0.5845.190（官方版本）（64 位）”

这似乎也发生在 stackoverflows 内联“运行代码片段”中 但不适用于 stackoverflows 代码片段编辑器
在我的实际项目中，我也看到了这些插入边框。 我想去掉插入边框。

这是代码问题还是浏览器部分的意外/未定义行为？

示例

Chrome 有问题：

Firefox 看起来不错：

示例代码：

在 chrome 中单击此按钮将显示这些黑色插入边框；

尽管在 stackoverflow 代码片段编辑器中，边框不可见。

在这个

jsfiddle
中也可以观察到行为。

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

.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);
}

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

您可以更改已具有

Answer 1

的元素的

backdrop-filter

。

在示例中稍微更改了代码：

button.onclick = () => document.querySelector('.text').classList.toggle('blurred');

.container {
  background: linear-gradient(135deg, #57cdff, #05a915);
  padding: 20px;
}

.text {
  font-family: sans-serif;
  font-size: 40px;
  color: white;
  border: 2px solid white;
  border-bottom-color: rgba(0, 0, 0, .1);
  min-height: 200px;
  display: grid;
  place-items: center;
  position: relative;
}

.text:after{
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(5px);
  transition: opacity .5s;
  opacity: 0;
  pointer-events: none;
}

.text.blurred:after {
  opacity: 1;
  pointer-events: auto;
}

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