Android 版 Chrome のバージョン 56 以降、URL バーのサイズ変更動作が変更されています。Super Stickers の概要:
ビューポート ユニット（vh）で定義された長さは、URL バーの表示 / 非表示に応じてサイズ変更されません。代わりに vh ユニットは、URL バーが常に非表示になっている場合と同様に、ビューポートの高さに合わせてサイズが変更されます。つまり、vh ユニットは「可能な限り最大のビューポート」のサイズに設定されます。つまり、100vh は、URL バーが表示されたときに表示される高さよりも大きくなります。
Initial Containing Block（ICB）は、親に対して相対的に要素のサイズを設定するときに使用されるルートを格納するブロックです。たとえば、<html> 要素に width: 100%; height: 100% のスタイルを指定すると、ICB と同じサイズになります。この変更により、URL バーが非表示のときに ICB のサイズが変更されなくなります。
代わりに、URL バーが常に表示されているかのように高さは変わりません（「可能な限り小さいビューポート」）。つまり、ICB の高さに合わせた要素は、URL バーが非表示になっている間、表示される高さを完全に埋めることはできません。
上記の変更には例外が 1 つあります。それは、position: fixed の要素です。動作は変わりません。つまり、包含ブロックが ICB である position:
fixed 要素は、URL バーの表示 / 非表示に応じてサイズが変更されます。たとえば高さを 100% にした場合、URL バーが表示されるかどうかにかかわらず、常に表示される高さとまったく同じ高さになります。同様に、vh の長さについても、URL バーの位置を考慮して、表示される高さに合わせてサイズが変更されます。
この変更には次のような理由があります。
モバイルで使用できる
vhユニットです。これまでvh単位を使用すると、ユーザーがスクロール方向を変更するたびにページのリフローが異常に行われていました。ユーザー エクスペリエンスの向上。ユーザーが読書中にページをリフローすると、ドキュメント内の相対的な位置が失われる可能性があります。これは不満ですが、ページを再レイアウトして再描画するためにプロセッサの使用量とバッテリーの消耗が余計にかかります。
iOS 版 Safari との相互運用性を改善しました。新しいモデルは Safari の動作と合致するように設計されており、ウェブ デベロッパーの作業負担が軽くなります。
vhユニットを可能な限り最大のビューポートにし、ICB を可能な限り小さくするという直感的には、Safari の動作に合わせるという選択がありましたが、
URL バーが非表示の状態でロックされている全画面表示のシナリオでは、ICB は全画面の高さを使用します。スクロールによって URL バーが表示されないため、「可能な限り小さいビューポート」が完全なビューポートとなるため、これは上記の定義と同じです。
デモ
- こちらのデモをご覧ください。ページの右側にある 4 本のバーは、スクロール可能なページで提供される
99%、99vh、position:fixed、position:absoluteの組み合わせです。URL バーを非表示にすると、それぞれの影響を確認できます。サイズ変更イベントはページの下に出力されます。
サポート
- Android 版 Chrome 56