親要素にbackdrop-filterを追加すると子要素のfixedは無効化される

現象

ぼかしを加えたらレイアウトが崩れるという謎現象。

<div className="backdrop-blur">
 <div>static contents</div>
 <div className="fixed top-0 left-0">fixed contents</div>
</div>

さらに謎なのがSafariだとこの現象はみられないということ。

解決策

fixedのコンテンツを外に出す。

<>
 <div className="backdrop-blur">
  <div>static contents</div>
 </div>
 <div className="fixed top-0 left-0">fixed contents</div>
</>

ブラウザの修正がはいったら、この現象は見られなくなるかもしれないです。