どう考えても iOS Safari 26 はあらゆるものがおかしい。特に position: fixed
iOS 26 がリリースされてしまった。
デザインの刷新には、かなり賛否があった。デザインがガラッと変わってしまったせいか、Safari 26 の挙動はかなり怪しい。僕はベータ版から使用していたものの、正式リリースまでには直るだろうと楽観的に考えていた。しかし、どうやら正式リリースでも修正されていないようなので、仕方なくどういった点で iOS 26 の Safari がおかしいのかを書く。
position: fixed による位置指定がおかしい
実際の挙動を見ると分かりやすい。ヘッダーやフッターを固定するために position: fixed
を使うが、それを使用するとスクロールに応じてズレる。
この動画の通り、おめでたいことに Apple の公式サイトでさえズレる。
フッターだと、なぜか数ピクセルアドレスバーから離れた位置に描画される。
こういうヘッダー・フッターの実装は極めて簡単にできる。例えば、このような CSS コードになる。
.header {
position: fixed;
inset-block-start: 0;
}
しかし iOS 26 では明らかにおかしい。WebKit のバグとしては Bug 297779 が当てはまると思われる。セーフエリアの問題かとも思ったが、実際は関係なかった。むしろ、viewport-fit=cover
が設定されたページの方がバグる。
上記のバグ報告は正式版リリース前にされているものの、残念ながら対応には至っていない。
メニューなどを開くと Liquid Glass が適用されなくなる
ページ内で実装されているメニューを開くと、アドレスバーに適用されていた Liquid Glass がなぜか無効化される。これはメニューを開いているのにアドレスバーの裏にあるコンテンツが表示されてしまうのを防ぐための実装だと考えることができる。
しかし、メニューを閉じた後も、Liquid Glass の無効化は続いたままで、他のページに移動したり更新するまで、そのまま。
そもそも Liquid Glass が壊れてないか?
ベータ版登場からずっとコントラストが弱いことが指摘されていた Liquid Glass だが、正直まだ改善が必要なのではないだろうか?

この見た目で本当に良いのだろうか?

なぜここは上下で余白が異なるのだろうか?

光るエフェクトを入力欄に適用させて、範囲選択が快適にできるのだろうか?
素人でも「ダメだよね」ってのが分かる NG 点がいくつもあって、なぜこのクオリティで正式リリースしようと思ったのかが謎。