我有以下代码在背景图像上应用模糊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