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

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。

サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。

特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。

Chrome 108で予定されているビューポートのサイズ変更動作の変更

Prepare for viewport resize behavior changes coming to Chrome on Android
by Bramus

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。

はじめに

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 2022Viewport 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に設定できます。

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サイトをテストすることをお勧めします。

特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素に注意してください。

フィードバックは、crbug.comで受け付けています。その際は、タイトルに「on-screen keyboard」を必ず含めてください。

その他のリソース

sponsors

top of page

©2022 coliss