新しいCSSビューポート単位: `svh`, `lvh`, `dvh`

• ビューポートの幅/高さを基準に設定するのは便利だが、vh にはモバイルで多くのバグがある
  → ビューポートサイズにブラウザのアドレスバーUIが含まれていないため
• 100vh はモバイルでビューポート全体の高さになるべきだが、スクロール時にUIを隠すSafari/Chrome（Android）では問題が発生する
• そのためCSSワーキンググループが新しい単位 svh, lvh, dvh を導入
  • svh Small Viewport : アドレスバーUIが縮小されていない状態のビューポート高さ
  • lvh Large Viewport : アドレスバーUIが縮小された状態のビューポート高さ
  • dvh Dynamic Viewport : svh / lvh の間で動的に変化
• 100dvh を使うと、最下部にあるボタンが常に表示されるように設定できる
  • ただしパフォーマンス上の問題が生じる可能性があるため注意が必要

[hided62]

おお！ Firefox for Androidでposition:fixed, bottom: 0にするとひどいくらいおかしな動作をすることがあったので、これで解決するのか確認してみないとですね。

[tobyyun]

https://caniuse.com/viewport-unit-variants
iOSは15.4から、Androidは114からサポートされているようです

[tomriddle7]

Viewport Unitが多すぎて、だんだん混乱してきますね

[carnoxen]

本来はブラウザが責任を負うべき問題なのに、標準化グループが責任を負うという皮肉…