【CSS】position: fixed; が、content-visibility が原因で固定されなかった話

WordPressのとある既存テーマをカスタマイズしていたときに
position: fixed;を付与したのに、固定されずスクロールしてしまう現象に遭遇しました。
原因を突き止めてみたら、至極当たり前のことでした。
考えたら当たり前なんだけど、灯台下暗しというか、完全に盲点でハマってしまったので、ここに共有します。

前提

HTMLは、下記のような構造です。

.child02を固定したくてposition: fixed;をつけたけれど、
固定されずスクロールしてしまった、というお話です。
みなさんなら原因に何を疑いますか？

推理①：親要素に relative がついてるから？

親要素である.parentにposition: relative;がついていました。
だからいっしょにスクロールされちゃうの？？
いや、そんなことはない。CSSさんが『fixed！』といえば、要素は指定した場所に固定されます。

推理②：親要素に transform を使っているから？

「position fixed 効かない」でググるとこの手の話があがってきます。
親・先祖要素にtransformを使っているとfixedが効かなくなるらしいんですが、
今回の場合、transformは使われていませんでした。

原因：親要素に content-visibility: auto; が指定されていた

結局、親要素である.parentにcontent-visibility: auto;が指定されていたことが原因でした。

content-visibility とは？

content-visibilityとは、子要素のレンダリングを制御できるプロパティです。
SafariやFireFoxはまだ対応していませんが
対応ブラウザでは読み込みのパフォーマンスが向上するということなので、
今回のWPテーマでも適用していたようです。

【参考リンク】
content-visibility｜mdn web docs
content-visibility｜Can I Use

今回は親要素（.parent）にcontent-visibility: auto;が指定されていたので、
画面の外にいるときは子要素の.child01と.child02は非表示になる、ということです。
fixedがどーのこーのではなく、レンダリングがスキップされるので表示されない。
そらそうだ。。。シンプルな原因でした。

まとめ

ということで、原因はcontent-visibilityでした！

position: fixed;が効かないというよりは、
content-visibilityについて知る回になってしまいましたが
これきっかけで新しいことが知れて、勉強になりました。
同じような現象でハマった人は参考にしてみてください！