css - 使用背景过滤器 : blur 时无法去除滚动时的模糊边缘

Question

在尝试玻璃形态样式并使用 css 背景过滤器时，滚动时元素顶部的边缘模糊不清。我觉得这应该是一个简单的解决方法，但我已经尝试了我所知道的一切(这显然还不够)并且无法弄清楚。我创造了一支笔，所以你可以看到我在说什么。由于某些令人困惑的原因，您必须在 codepen 中打开它才能看到不想要的效果。

body {
  background-image: url("https://www.theuiaa.org/wp-content/uploads/2017/12/2018_banner.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 200vh;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: soft-light;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 320px;
  height: 540px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
}

.arrow {
  position: sticky;
  top: 0px;
  font-size: 200px;
  line-height: 1;
  color: red;
}

.card p {
  font-size: 32px;
  padding: 20px;
}

<div class="container">
<div class="card">
  <div class="arrow"><span>&#129041;</span></div>
<p>As you can see when you scroll down, as soon as the card hits the top of the screen, you get a blurred edge. Not cool...</p>
  </div>
</div>

Codepen

Answer 1

我认为您发现了 Chrome 问题! (它不会发生在 Firefox 中)。
我很快就入住了chromium bugs并没有发现任何接近的东西..所以我建议你报告它!
另外 ，我做了一个测试以确定黑色“渐变”来自哪里......我改变了background Codepen 的颜色 .main-header !!
要重现，请将其粘贴到控制台中:

document.querySelector(".main-header").style.background = "red"

预期的结果是:

但令人惊讶的是“渐变”现在变成了红色 .
您当然知道 codepen 结果是 iframe ...所以我认为这被称为“油漆”问题。