Firefox 背景过滤器：blur() 不适用于粘性定位

Question

我正在使用带有样式组件和顺风的反应。由于某些原因，在使用 Firefox 时。背景过滤器：blur() 将不起作用。然而，使用 Chrome 时这不是问题。不完全确定为什么会发生这种情况。我记得读过说 Firefox 的模糊功能很奇怪，但我不明白为什么它会起作用，只是不能使用粘性定位，而且问题只出现在 Firefox 上。建议欣然接受

我将background-filter:blur()添加到需要模糊的容器中，我将其加载到Google Chrome中，效果很好。当我在 Firefox 上加载页面时，模糊不存在。如果我从元素中删除粘性定位，则模糊将在 Firefox 上按预期工作

另外，我确保在我的设置中启用了模糊

Answer 1

编辑：我遇到了这个错误条目，它总结并证实了我在这里描述的发现。

设置一些测试用例后，我找出了导致问题的原因（至少在我的情况下）。如果没有看到您的代码示例（简化的），很难判断您的设置是否与我的类似，但这是我发现的（希望它对您和其他人有帮助）。

以下设置导致背景过滤器无法在 Firefox 中工作（在 macOS 版本 114 中测试）：

1. backdrop-filter: blur();已position: sticky;设置的元素
2. 父元素有一个border-radius和overflow属性集

CodePen 的设置

删除父元素的一个或两个提到的属性将使背景过滤器在 Firefox 中正常工作。

我知道这是一个非常具体的设置，但也许您提到的样式组件或顺风正在创建此设置......

我试图找到一个可行的解决方案，例如添加一个内部容器或一个伪元素来设置过滤器，但没有任何效果。