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

スポンサーリンク

※本サイトにはプロモーションが含まれています

CSS

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

前提

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

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

推理①:親要素に relative がついてるから?

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

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

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

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

結局、親要素である.parentcontent-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について知る回になってしまいましたが
これきっかけで新しいことが知れて、勉強になりました。
同じような現象でハマった人は参考にしてみてください!

コメント

タイトルとURLをコピーしました