使用背景滤镜时无法移除滚动上的模糊边缘：模糊答案

【问题标题】：Can't remove blurry edge on scroll when using backdrop-filter: blur使用背景滤镜时无法移除滚动上的模糊边缘：模糊
【发布时间】：2021-04-08 10:52:33
【问题描述】：

在尝试 glassmorphism 样式并使用 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

【问题讨论】：

标签： css filter scroll blur blurry

【解决方案1】：

我认为您发现了 Chrome 问题！ （在 Firefox 中不会发生）.

我很快检查了chromium bugs，并没有发现任何接近的东西。所以我建议你报告它！

另外，我做了一个测试，以确定黑色“渐变”的来源......我改变了 Codepen 的 .main-header 的 background 颜色！！

要重现，请将其粘贴到控制台中：

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

预期结果是：

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

【讨论】：

好吧，我发现了一些关于 chrome 的类似问题，但是从 2015 年开始，所以我认为他们现在已经修复了它。有什么奇怪的，或者答案可能就在于此……如果您运行代码 sn-p，它实际上不会产生问题。这就是为什么起初，我想是否可能是我缺少的一些参数......
if you run the code snippet, it actually doesn't create the problem SO sn-p?是的，它会产生问题，但由于“顶部元素”不是完美的黑色，因此可能会更微妙地引起注意。
好吧，你是对的，如果你全屏打开它。对不起，我什至不知道你能做到这一点。但是，如果您在单击“运行代码 sn-p”按钮时仅在此页面上打开它，我看不到模糊。这就是为什么我认为这可能是需要将 div 放在 div 等中的问题。
我做了bug report。