content-visibility:hidden要素のサイズ

1 min読了の目安(約1100字TECH技術記事

ページ表示速度を向上させるためのHTML仕様、content-visibilityプロパティがChromeに実装されました。(とても分かりやすい解説はこちら
ビューポート外でのレンダリングをスキップして表示を高速化するこの仕様、そのスキップされた状態(content-visibility:hidden)でDOMサイズを取得すると値はどうなっているのか気になったので調べました。

検証方法

上記のコードで検証。
content-visibilityを設定した要素には、ページ全体の長さが大きく変動しないようcontain-intrinsic-sizeが設定できるのでその有無と、対象要素のdisplayプロパティをblockinline-blockで比較してみました。
その他条件は以下

  • section要素にcontent-visibility:auto;を設定してファーストビュー外に配置
  • 対象要素にはサイズ指定なし、親要素にcss幅指定

MacOS: 10.15.6 + GoogleChrome: 85.0.4183.102

結果

block/cisあり block/cisなし inline-block/cisあり inline-block/cisなし
clientWidth 親要素の幅 親要素の幅 contain-intrinsic-size 0
clientHeight contain-intrinsic-size 0 contain-intrinsic-size 0

高さとしてcontain-intrinsic-sizeが取得できる&指定なしなら0は予想通りだが、レンダリングされていなくてもblock要素なら幅はデフォ値である親要素100%の値が、inline-block要素なら幅もcontain-intrinsic-sizeが適用されるというのは発見でした。

検証やってて、大きな要素にcontain-intrinsic-sizeを指定しないとスクロールバーが目に見えてガクガクするので、基本セットで使った方が良いと思いました。