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