chrome中的背景过滤器有黑色边框答案

【问题标题】：Backdrop-filter in chrome has black borderchrome中的背景过滤器有黑色边框
【发布时间】：2023-03-28 14:55:01
【问题描述】：

我尝试在 chrome 中添加 future-property backdrop-filter：

.glass {
    --webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); /* chrome */
}

在chrome://flags/#enable-experimental-web-platform-features 中激活它后，它终于可以工作了，但是，我得到了一个黑色边框。有人知道如何删除该边框吗？

编辑

没有零数据错误或其他东西（使用 SO-page 测试）：

如果我使用3px 而不是10px，边框会更小，但不会消失：

Here is a fiddle 但更好的是，您将其复制到本地，因为 fiddle 在示例中也恰到好处。然后它看起来像这样：

【问题讨论】：

你不能禁用模糊吗？这看起来像 chrome 正在模糊背景边缘之外的零数据......我怀疑你想禁用模糊......
@SamPearman 更新了我的帖子。
是的，没错。如果它正在做我认为它正在做的事情，那么它就是 Chrome 中的一个错误。你能提供更多的上下文吗？一些HTML或什么？编辑：啊，没关系。我想我明白你的意思了。
哈哈：D 我用 stackoverflow-page 测试了最后两张截图：D 我会添加一些 html/css
对我来说这看起来像是 Chrome 中的一个渲染错误。它试图完全按照您的要求进行模糊，但是渲染器在图像外部的 10 或 3 个像素处获取空或 0 数据，因此当它进行模糊时，它将空数据视为真实数据，并执行 RGB模糊。如果它改为进行 RGBA 模糊，那么这不会引起注意，因为 A 通道将是完全透明的（尽管 Chrome 的部分仍然是错误的）。在我看来，如果不更改 Chrome 的代码库就无法修复，因为它只是在考虑不存在的额外数据。

标签： html css google-chrome

【解决方案1】：

我使用了filter 而不是backdrop-filter，但它可能不是你想要的那样，但它确实像预期的那样模糊了文本，因为chrome 中的错误报告可能仍然存在，在this 为backdrop-filter 发帖。

body{margin:0;}
    
        .front{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 20px;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
        }
        
        .back {
            margin: 20px;
        }

<body>
    
    <div class="front">
        <p> this is in the front </p>
    
    </div>
    
    <div class="back">
    <p> this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back </p>
    </div>
    
    
</body>

这会使前面模糊，但在我的下一个示例中，我有：JSFiddle

【讨论】：

谢谢，但这模糊了front-div 而不是back-div 在front-div 的位置：D
@MatthiasBurger 我知道，但我想我只会显示filter 的选项：P 也许你可以找到解决方法
是的，我会用filter 测试一下-也许有解决方案。
@MatthiasBurger 你看过 jsfiddle 了吗？ ;P
@MatthiasBurger 好吧 :) 我希望会有比我更好的解决方案！希望你能弄清楚并在找到时告诉我，我很好奇

【解决方案2】：

这是由上述 cmets 中所述的 Chrome 中的渲染错误引起的，目前无法修复。

稍微搞砸，你可以在某种程度上欺骗它，但它的行为并不完全正确。

This Fiddle 是我的众多尝试之一，但它只是缓解了问题。你不能完全修复它。通过仔细控制效果开始和结束的位置，您可以避免在窗口边界之外读取 chrome 并混合黑色，但最终会损失几个像素。

    .frontcontainer{
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .front1{
        position: relative;
        right: 3px;
        width: calc(100% - 6px);
        backdrop-filter: blur(3px);
    }

我还尝试将 div 彼此叠加，并在边缘使用较浅的模糊，虽然不是 100% 正确，但这会奏效，但分层的背景模糊不能正确或一致地交互。

【讨论】：

如果您网站的背景是纯色的，那么您实际上可以使用这样的技巧侥幸成功。不过，如果您在彩虹上需要它，那就没有机会了。
所以我只给你代表，因为你的答案是最接近的。我希望谷歌浏览器有一天会修复这个错误：D

【解决方案3】：

我不知道你是否还在努力解决这个问题，但我通过使用嵌入的白色阴影在一定程度上隐藏了黑色模糊来解决它。

所以对于窗口底部的栏，我有以下内容：

backdrop-filter: blur(2px);
box-shadow:
    inset 3px -2px 5px rgba(255,255,255,0.6),
    inset -3px -2px 5px rgba(255,255,255,0.6);

它并不完美，但它几乎隐藏了由 Chrome 的渲染错误引起的黑光。

当然，这是 Chrome 特有的，您不希望在其他没有此错误的浏览器中出现白色嵌入阴影。

【讨论】：