CSS のブラーと mix-blend-mode を同時に使うとチラつく

自分のサイトで以前から謎のチラつきが発生していたため、原因を調べていたところ Chromium のバグが原因であることが判明したのでメモ。

不具合の概要

https://monorail-prod.appspot.com/p/chromium/issues/detail?id=1348920

Chromium で、backdrop-filter: blur;とmix-blend-modeを同時に使うと、Chrome のタブをホバーしたときにブラーをかけた要素がチラつく。

Issue Tracker で議論は行われているものの、2022 年 8 月に報告されて以降表立って作業が進んでいる様子はないため、すぐに修正されるかは不明。

現状ではこの 2 つの CSS プロパティを同時に使わないようにするしかなさそう。

不具合の再現方法

1. Windows や Linux で Chrome や Edge などの Chromium ベースのブラウザを開く。
2. https://6835nj.csb.app/ を開く。
3. 複数のタブを開きホバーする。

不具合の発生する環境

Chromium のフォーラムに投稿されたバグレポートによれば、少なくとも103.0.5060.134以降のバージョンで発生する。

コメントによれば Version 87 あたりから発生しているという報告もある。

Windows だけでなく Android でもズームインやツールバーのスワイプでタブを切り替えようとするときに発生した。

終わりに

ブラーとmix-blend-mode両方使うこと結構ありそうだけど誰もこの不具合に言及していないのはなぜ.....？