背景滤镜模糊在更改窗口大小时不调整大小

Question

我有以下代码在背景图像上应用模糊

backdrop-filter

：

<div className="container">
    <div className="blur" />
      <div className="box">
        <h2>Start editing to see some magic happen!</h2>
      </div>
</div>

CSS：

.container {
  height: 100vh;
  width: 100vw;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.blur::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}

在调整窗口大小之前似乎效果很好，过滤器不会像背景图像那样调整大小。我尝试将父级

div

更改为

position: relative

但它也没有用

https://codesandbox.io/s/snowy-tdd-b5u8ed?file=/src/App.js

Answer 1

现在的解决方法是将这个额外的样式添加到背景过滤器所在的同一类/ID。

非常适合我。

filter: blur(0);

例子：

.blur-section {
    width: 100%;
    backdrop-filter: blur(12px);
    filter: blur(0);
}

Answer 2

这似乎是一个 WebKit 问题，因为它在 Firefox 中对我来说工作正常。我有点通过将模糊的 div 设置为非常大的尺寸来解决它，因此它总是覆盖整个屏幕。然而，这似乎确实会导致一些小的瑕疵，例如 Firefox 中的闪烁。

Answer 3

这显然会在 Chrome 112 中得到修复（目前是测试版现在稳定）。

我可以在 Chrome 110 和 111 中重现该问题，但在 112 和 113 中都不能。在 MacOS 下测试过。

Chrome 112 的发布日期是2023 年 3 月 29 日。见https://chromestatus.com/roadmap

所以我想，对于 some 开发人员来说，正确的答案是“等待”。

Answer 4

添加另一个大小为 0 的过滤器将解决此问题

Answer 5

::before

不是一个好的选择。您最好将

filter:blur

应用于图像本身。

.container {
  height: 100vh;
  width: 100vw;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(60px);
  backdrop-filter: blur(60px);
}

Answer 6

我现在使用以下代码以防万一有人想知道

.blur {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(60px);
    backdrop-filter: blur(60px);
    scale: 1.1 !important; // to hide white border when using blur filter
    transform: translate3d(0,0,0); // enable 3d acceleration on safari
}

Answer 7

问题在 chrome 版本 112 中得到解决