我正在用react處理樣式組件和順風。出于某種原因，在使用火狐的時候。background-filter:blur()不起作用。然而，當使用chrome時，這不是問題。不完全確定為什么會這樣。我記得我讀到過Firefox帶模糊很奇怪，但我不明白為什么它會工作，只是沒有粘性定位，問題只在Firefox上。欣然接受的建議

我在需要模糊的容器中添加了background-filter:blur()，我將它加載到Google Chrome中，很好。當我在Firefox上加載頁面時，模糊不清的地方不存在了。如果我從元素中移除粘性定位，模糊將在Firefox上正常工作

此外，我確保在我的設置中啟用了模糊

在設置了一些測試用例之后，我找出了是什么導致了這個問題(至少在我的案例中是這樣)。沒有看到您的代碼示例(簡化)，很難判斷您的設置是否與我的相似，但這里是我發現的(希望它能幫助您和其他人)。

以下設置導致背景濾鏡在Firefox中不起作用(在macOS上的版本114中測試):

帶有background-filter:blur()的元素；有位置:粘性；設置 父元素具有border-radius和overflow:clip；設置 使用設置打開代碼

移除父元素的一個或兩個屬性將使背景過濾器在Firefox中工作。

我知道這是一個非常具體的設置，但也許你提到的風格組件或順風創造了這個設置...

還要注意Chrome中頁眉及其邊框半徑的奇怪行為(在macOS上的114版本中測試)。即使在滾動時，header元素也會呈現父元素的邊框半徑(header元素上沒有設置邊框半徑)。有時，當滾動回頂部時，標題不會被剪切(見下面的截圖)。Safari(版本16)似乎沒有設置問題。

總的來說，由于相對較新的CSS屬性，似乎存在渲染問題。我試圖找到一個可行的解決方案，比如添加一個內部容器或者一個偽元素，但是在我的例子中沒有任何東西可行。

呈現在滾動條上的邊框半徑的屏幕截圖

向后滾動時元素未被剪切的屏幕截圖