iOS26のSafariには、いろいろと問題、不具合、バグがありそうで、情報収集しました。それらのまとめです。
100dvhが100dvhになっていないじゃないか問題
- ファーストビューでの全画面プレゼンが高さ100%にならない(ように見える)
- モーダルダイアログのBGグレー透過背景が高さ100%にならない(ように見える)
- ハンバーガーメニューをオープンした時に高さ100%にならない(ように見える)
- 画面下部だけじゃなく画面上部も勝手に表示されることがある
→
iOSの設定(アクセシビリティの「画面表示とテキストサイズ」の「透明度を下げる」)における透明度のon/offで見た目が異なるので透明度onのときに合わせてむりやり高さを100%以上に引き伸ばすと、透明度offのときに見切れ問題がある。通常ブラウザ側からの設定状況取得は、CSS mediaqueryのprefers-reduced-transparencyにて判定可能になるはずだが、iOSのSafariにはprefers-reduced-transparencyは実装されていない。この設定が実装されるまで、透明度の問題の根本的な回避策(有用な実装)はHTML/CSSレベルでは記述できないと見られる。
ちなみに、上下が覆われておらず、高さが足りないと思っている部分が実は100dvhで、その上下(上の時計などあるエリアと、下のURL欄などがあるタブバーのエリア)はviewportからはみ出ているエリア。viewport外が見えている状態。viewportがviewportの役目になっていない。アプリUIの仕様がおかしい。
position:fixed;bottom:0;が固定されないじゃないか問題
- bottomに固定でなく画面上下中央に固定表示？（という投稿を見かけた）
- bottom:0が100dvhの最下部なので透過しているタブバーの上になるので一番下に見えない(ように見える)
- スクロール中にbottomとタブバーの間に隙間が見えることがある(隙間ないパターンもある) 画面最下部の判定できていない
- 100dvhの下、タブバーのエリアの背景に勝手に色塗りされるが、塗られる色の判定基準がわからない(ついでに画面上部の時計などあるエリアも塗りつぶしされることがある)
→
全般的にこれはバグっぽいが、どうか？ 固定パーツは100%幅でなく背景色塗りなしという小細工のデザインで回避できそう
その他、認識しておくこと
- Safariにおけるタブバーの表示設定はデフォルトの「コンパクト」以外に、「上」「下」があるが、それぞれ100dvhの表示の挙動が異なる
- デバイスの横持ち(landscape)での表示もあり、透明度がonになっている通常の状態において、タブバーが「コンパクト」設定でも画面上部にタブバーが透明でない状態で、ベタっと表示されるからこっちの考慮も必要
- 「共有」から「ホームに保存」でホーム画面にブックマーク保存してからタップして開く、PWAのモードも見た目が通常のSafariと異なるので、むりやり通常のSafariに対してHackした場合はその点も留意が必要
つまり組み合わせは以下の通り。
- デバイス縦(portrait)
- 透明度on(アクセシビリティ設定の標準)
- タブ・コンパクト
- タブ・上
- タブ・下
- 透明度off(アクセシビリティ設定でoff)
- タブ・コンパクト
- タブ・上
- タブ・下
- 透明度on(アクセシビリティ設定の標準)
- デバイス横(landscape)
- PWA
さらに、細かく見ていくとデバイス横の透明onとoffの区別、デバイス横のタブ配置の区別、デバイス横のタブ表示off設定、PWAのデバイス横とデバイス縦の区別も必要かも。
他、何かiOS26のSafariの挙動で気になることがあれば、コメントで教えてください。
2025-09-24追記
挙動やハックをまとめている方がいましたので、共有しておきます。iOS26のSafariの縦モード(portrait)専用の検証なので、横持ち(landscape)するとおかしなことになりますね。
2025-09-30追記
iOS26.0.1がリリースされました。が、Safariの課題は解決していません。先は長そうです。
2025-10-14追記
ブラウザのモード別の区別の組み合わせについて追記した。また、当初「メニューバー」とこの投稿では記載していたが、iOSのSafariの設定画面の表記が「タブ」の配置になっているので、「タブ」または「タブバー」と記述を修正した。
2025-11-04追記
iOS26.1がリリースされたけれど、状況に変化なさそう。