iPhoneのスクロール背景色の問題

ウェブアプリケーションを作成する際には、全てのデバイスで一貫したユーザーエクスペリエンスを確保することが重要です。iOSデバイス向けにデザインする際に開発者が遭遇する一般的な問題は、ユーザーがウェブページの上部または下部を超えてスクロールすると表示されるデフォルトの白い背景です。

この動作はiOSの「バウンス」効果に由来します。「バウンス」効果は、ユーザーに奥行きとコンテキストの感覚を与え、ページの末尾にスクロールしたことを知らせるためのiOS固有の機能です。ユーザーがページの端を超えてスクロールすると、スワイプとともにウェブページが移動し、スワイプが終了すると元の位置に戻りますが、この過程で白い背景が表示されます。

この背景はページ自体とは別のものであり、HTMLのbody要素やページ要素に異なる背景色を設定しても、白いままです。

-webkit-overflow-scrollingの解決策

この問題の一般的な回避策として、非標準の-webkit-overflow-scrolling CSSプロパティが使用されます。このプロパティは要素のスクロール動作を設定し、タッチデバイスでの慣性スクロールを可能にします。このプロパティを使用することで、開発者はスクロール領域に一貫した背景色を設定することができます。

以下に実装例を示します。

body {
  background: blue;
  -webkit-overflow-scrolling: touch;
}

この解決策は直ちに問題を解決できますが、開発者は-webkit-overflow-scrollingが標準的なCSSではなく、SafariのようなWebKitベースのブラウザ専用であることを認識する必要があります。また、Appleはこの機能を公式に非推奨としており、将来のiOSバージョンでは動作しない可能性があります。

擬似要素の解決策

前の解決策の互換性の問題を回避するために、開発者はより標準に準拠したテクニックを利用することができます。この解決策では、bodyの背
景色を覆う固定の擬似要素を作成する方法を使用します。この擬似要素の背景色を設定することで、スクロール操作中に一貫した背景色を確保することができます。

以下にこの解決策の例を示します。

body::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: blue;
}

このCSSルールを追加することで、擬似要素はビューポート全体に固定された青い背景を提供します。その結果、ユーザーがウェブページの上部または下部を超えてスクロールすると（バウンス効果が発生する）、デフォルトの白い背景の代わりに青い背景が表示されます。