📺
content-visibility:hidden要素のサイズ
ページ表示速度を向上させるためのHTML仕様、content-visibilityプロパティがChromeに実装されました。（とても分かりやすい解説はこちら）
ビューポート外でのレンダリングをスキップして表示を高速化するこの仕様、そのスキップされた状態(content-visibility:hidden)でDOMサイズを取得すると値はどうなっているのか気になったので調べました。
検証方法
上記のコードで検証。
content-visibilityを設定した要素には、ページ全体の長さが大きく変動しないようcontain-intrinsic-sizeが設定できるのでその有無と、対象要素のdisplayプロパティをblockとinline-blockで比較してみました。
その他条件は以下
- section要素にcontent-visibility:auto;を設定してファーストビュー外に配置
- 対象要素にはサイズ指定なし、親要素にcss幅指定
結果
| 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を指定しないとスクロールバーが目に見えてガクガクするので、基本セットで使った方が良いと思いました。
Discussion