11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

Post on:2022年11月15日

はじめに

11月末にリリース予定のChrome 108では、オンスクリーンのキーボード（OSK）が表示されたときのレイアウトビューポートの動作が一部変更される予定です。

この変更により、Android版Chromeではレイアウトビューポートのサイズ変更がされなくなり、代わりにビジュアルビューポートのみがサイズ変更されます。これにより、Android版Chromeの動作は、iOS版ChromeおよびiOS版Safariの動作と同じになります。

この記事では、この変更の背景、変更理由、何を準備しておけばよいかについて解説します。

レイアウトビューポートとビジュアルビューポートについて

Webページにアクセスすると、ロードされた後にページのコンテンツ全体は表示されません。その代わりに、ブラウザはページの一部を表示するためのビューポートを提供します。このビューポートは「レイアウトビューポート（Layout Viewport）」と呼ばれるもので、ページのコンテンツが大きくなりすぎた場合にブラウザはスクロール機能を提供します。

デスクトップのブラウザのレイアウトビューポート（ブルーの枠）

position: fixed;を使用して要素を配置すると、その要素はレイアウトビューポートに対して配置されます。ページを下にスクロールしてもレイアウトビューポートは固定されているため、position: fixed;した要素も同じように固定されます。

左からiOS版Safari、Android版Chrome、Android版Firefox
レイアウトビューポート（ブルーの枠）、position: fixed;した要素（ブルーの箱）

ブラウザはこのレイアウトビューポートに加えて、「ビジュアルビューポート（Visual Viewport）」も提供します。ビジュアルビューポートは、現在表示されているビューポートの一部を表します。ズームレベル1では、このビジュアルビューポートはレイアウトビューポートと同じ大きさです。

ビジュアルビューポート（オレンジの枠）

スマホでピンチズームすると、レイアウトビューポートに対してビジュアルビューポートのサイズが縮小されます。

ピンチズームしたページのビジュアルビューポート（オレンジの枠）

ビジュアルビューポートがレイアウトビューポートの中に含まれていることに注目してください。

ビューポートがサイズ変更する仕組み

スマホで入力または編集可能なエリアをタップすると、デバイス（主にタッチデバイス）はスクリーンにキーボードを表示することができます。このキーボードは仮想キーボード（virtual keyboard）と呼ばれるもので、ユーザーは編集可能なエリアにコンテンツを入力することができます。

その際、ブラウザはさまざまなビューポートに関連して次のいずれかの方法で応答します。

ビジュアルビューポートのみをサイズ変更し、レイアウトビューポートをサイズ変更しない。
ビジュアルビューポートとレイアウトビューポートの両方をサイズ変更する。
ビジュアルビューポートとレイアウトビューポートのどちらもサイズ変更せず、仮想キーボードを両方の上に重ねる。

これら3つの動作は、次のように視覚化されます。

左: iOS版Safari、中・右: Android版Chrome
ビューポートがサイズ変更する仕組み

ビジターが使用するブラウザとOSの組み合わせによって、あなたのコントロールが及ばないところでいずれかの動作が1つ使用されます。

ブラウザとOSの組み合わせによるさまざまなサイズ変更動作

Interop 2022のViewport Investigation Effortで、主要ブラウザとOSの組み合わせについて、ビューポートに関連するさまざまなアスペクトが調査されました。

調査された中の一つが、OSK表示時のサイズ変更動作です。その結果は、下記のように分類されます。

グループ 1

ビジュアルビューポートをサイズ変更し、レイアウトビューポートをサイズ変更しないブラウザ。

Safari on iOS
Safari on iPadOS
Chrome on Chrome OS
Chrome on iOS
Chrome on iPadOS
Edge on iOS
Edge on iPadOS

グループ 2

ビジュアルビューポートとレイアウトビューポートの両方をサイズ変更するブラウザ。

Chrome on Android
Firefox on Android
Edge on Android
Firefox on iOS

グループ 3

ビューポートをサイズ変更しないブラウザ。

デフォルトではなし
Android版Chromeで、VirtualKeyboard APIを使用してこの動作を選択できます。

各動作がもたらす副作用

仮想キーボードが表示されたときに、ビューポートのサイズ変更方法の違いによりWebページのレイアウトおよびサイズ変更の動作につながります。

グループ 1のブラウザで仮想キーボードを表示させた場合は、

ビューポートの相対単位の計算値は変わりません。
ビジュアルスペース全体を占めるようにデザインされた要素は、そのサイズを維持します。
position: fixed;した要素はそのまま残りますが、仮想キーボードによって隠される可能性があります。

グループ 2のブラウザで仮想キーボードを表示させた場合は、

ビューポートの相対単位の計算値は縮小されます。
ビジュアルスペース全体を占めるようにデザインされた要素も縮小されます。
position: fixed;した要素は、他の場所に配置される可能性があります。

左: iOS版Safari、中・右: Android版Chrome
副作用の可視化、position: fixed;した要素の配置が異なることに注目してください。

ビジターのUAを取得するおか、大規模なスクリプトを使用しない限り、どの動作が使用されているかを知ることはできません。また、アクセスしたブラウザとOSの組み合わせによって動作が決定されるため、この動作を変更することもできません。

Chrome 108ではデフォルトの動作が変更されます

Chrome 108以降、Android版Chromeはビューポートのリサイズ動作を調整し、仮想キーボードを表示しているときにレイアウトビューポートをリサイズしないようにします。

これにより、Android版Chromeの動作は、iOS, iPadOS, Windows, CrOS版Chrome、iOS, iPadOS版Safari、iOS, iPadOS, Windows版Edgeと同じ動作になります。

この変更により、制作者はChromeがどのOS上で動作していても、どの動作が使用されるかを知ることができます。さらに、仮想キーボードを表示または非表示にしても、単位に影響を与えないため、安定したビューポートの相対単位が可能になります。

異なる動作のオプトイン

もしあなたのWebサイトが108以前のリサイズ動作を使用したいのであれば、恐れる必要はありません。Chrome 108では、metaタグのviewportに拡張機能が提供されます。

interactive-widgetを記述して、必要なサイズ変更の動作をChromeに設定できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">

interactive-widgetの値は、下記の通りです。

resizes-visual: ビジュアルビューポートのみをサイズ変更し、レイアウトビューポートをサイズ変更しない。
resizes-content: ビジュアルビューポートとレイアウトビューポートの両方をサイズ変更する。
overlays-content: ビジュアルビューポートとレイアウトビューポートのどちらもサイズ変更しない。

この3つの値を視覚化すると、下記のような効果を与えます。

左からresizes-visual, resizes-content, overlays-content
すべてAndroid版Chrome 108

この動作は、デモページで確認できます。

何を準備しておけばよいか

Android版Chrome 108は、iOS版Safariと同様の動作をするため、既存サイトに若干の差異を生じることが予想されますが、ブロッキングは発生しないものと予想されます。したがって、iOS版Safariで正常に動作するWebサイトは、Android版Chrome 108でも正常に動作するはずです。

ただし、Webサイトの制作者は2022年10月27日からベータ版が公開されているChrome 108で積極的にWebサイトをテストすることをお勧めします。