Chromeで backdrop-filter: blur を使うとぼかしがバグるときの対処法

backdrop-filter: blur(...)を使って背後にぼかしをかけようとしたところ、Chromeで次のようなバグに遭遇した。

👆 背後の要素のぼかしが中途半端になってしまっている。特にテキストが気持ち悪い・・・

解決策: 背景色を指定する

色々と試した結果、背景が透明になっているとこの問題が発生することが分かった。そこでbodyに対して背景色を設定するようにしたところ、ちゃんとぼかしがかかるようになった。

body {
  background-color: #FFF;
}