React是否与CSS背景过滤器兼容？

Question

我在可滚动列表中包含一个固定元素，适用以下CSS规则：

.frosty {
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

乍一看，效果不错。但是，随着我开始将内容移到其后，固定元素的背景不会改变。

通常，固定元素后面的内容物会通过它渗出，看起来像是毛玻璃或类似物。难道是React在某种程度上阻止了重新渲染？我该如何解决？

只要我调整窗口大小，它都会更新。

这是一个最小的例子。您可以在磨砂和透明元素后面滚动红色，绿色和蓝色块。磨砂的不会更新。

Codepen

Answer 1

后退不是静态效果。该效果动态应用于下方（背景）的任何内容。 有react npm软件包库，支持背景滤镜效果。 会很灵活

https://www.npmjs.com/package/react-backdrop-filter