私が経験したクロスブラウジングの問題（主にSafari）

モバイルウェブ開発中に遭遇した2つの厄介なクロスブラウジングの問題と、その他考慮すべき問題について

記録しておきたいと思います。

SafariとSamsung Internetは、ブラウザ自体に下部のナビゲーションバーがあります。show/hideを特に設定していない限り、スクロールダウンすると表示され、スクロールアップすると消えます。

問題は、これらによってビューポートが固定されず、変化するという点です。

例えば、高さを100vhにした場合、ナビゲーションバーがないときにはレイアウトが正確に描画されますが、ナビゲーションバーが表示されると、ナビゲーションバーがUIを隠してしまう問題が発生します。

この問題を解決するには

1. dvhを使用する。

dvhは動的なビューポートであり、ビューポートの高さが変更されるたびに変化を自動的に反映します。そのため、アドレスバーやボトムナビゲーションの有無によるUIレイアウトの変更に対応できます。

2. svhも考慮できる。

svhは、アドレスバーやナビゲーションを除いた純粋なUI領域の高さです。アドレスバーやナビゲーションが表示されることが予想される状況では、svhを使用する方が正確です。

モバイルSafariでinputを選択すると、仮想キーボードによって既存のUI要素がずれる問題が発生しました。他のブラウザでは通常、仮想キーボードが絶対的に表示されますが、Safariモバイルウェブでは、まるでdisplay blockを適用したかのように場所を占拠していました。

Safariでは、仮想キーボードが表示されるときにビューポートの高さが動的に調整され、vh単位を使用する要素が再調整されることで発生する問題です。これを解決するには、

1. min-heightを使用する。

高さを固定することで、UIがずれないようにします。

2. ベンダープレフィックスを適用する。（後述）

Safariなど特定のブラウザで適用される属性を挿入します。

3. JavaScriptでビューポートを動的に制御する。

＊この方法は推奨しません。スクロールの高さが瞬時に移動するため、レイアウトが点滅します。

resizeイベントを掛けてビューポートが変更されたことを検知し、適切なスタイルを適用します。

3-1. focusinイベント発生時に位置を制御する。

3-2. 仮想キーボードが表示されたときに位置を制御する。（以下の例ではclassを適用）

CSSだけで完全に解決するのが最も理想的ですが、上記の事例で解決できない場合は、position: absoluteやfixedの要素かどうかを確認し、top、right、left、bottom属性を削除しながらCSSを修正する必要があります。

その他にも、Safariでモバイルウェブを開発する際に考慮すべきいくつかの事項を探してみました。

1. 一部の属性を使用する際には、ベンダープレフィックスを使用する。

＊ベンダープレフィックスは、ブラウザが特定のCSS属性を理解してレンダリングできるようにするプレフィックスであり、ブラウザによって異なる方法で実装されたCSSを意図したとおりに適用できるようにします。これにより、同じブラウザ間の一貫性と、旧バージョンのブラウザとの互換性を確保できます。

種類

-webkit-: Chrome、Safariなど
-moz-: Mozilla Firefox
-ms-: Internet ExplorerおよびEdge
-o-: Opera

ベンダープレフィックスが必要な代表的な属性は次のとおりです。

その他、SafariはLocalStorageとSessionStorageの容量を約5MBに制限しており、各タブ間でStorage領域を共有しないため、注意が必要です。