Safari(iOS 26)でアドレスバー背景がサイドナビ後に変わる件

iOS 26のSafariで、ページ下部のアドレスバー背景が少し気になる挙動をしていました。

最初はアドレスバー周りが透過っぽく見えているのに、サイドナビを開いて閉じたあと、背景色が付いた状態になることがあります。

表示が崩れるわけではないんですが、同じページ内で見た目が途中から変わるの気になる。
ちょっと気持ち悪いなーって思う。

なぜ色が変わるのか

SafariがブラウザUIの背景を決めるときに、ページ端の要素や固定要素を見ているためっぽいです。

iOS 26のSafariは、アドレスバーがページの上に重なるように表示されます。
そのため、ブラウザUIの奥に何も色がないと、ページとの境目が不自然になることがあります。

WebKit Bugzillaでも、position: fixedやposition: stickyのようなviewportに貼り付く要素が画面端付近にある場合、ブラウザUIの裏側に背景色を延長するような処理がある、という説明がありました。

301756 – Clarification: Top bar tint in Safari is derived from page background

bugs.webkit.org

今回のサイドナビもposition: fixedで画面に重ねるUIです。
サイドナビを開いたタイミングで、Safari側が「画面端に固定要素がある」と判断し、透過っぽい表示から背景色ありの表示に切り替わっちゃってます。

閉じたあともその状態が残ることがあり、その結果として「開く前は透過」「開いた後は色あり」という差が出ていました。

対応

見た目が途中で変わるくらいなら、最初から色付きに寄せることにしました。

HTML側にはSafari用の要素を置きます。

<div class="safari-bar">
  <div class="dummy"></div>
</div>

CSSは以下です。

.safari-bar {
  .dummy {
    position: fixed;
    z-index: -1;
    transform: translate3d(0, 0, -1px);
  }

  &::before,
  &::after {
    content: '';
    position: fixed;
    left: 0;
    z-index: 9999;
    transform: translate3d(0, 0, 9999px);
    width: 100%;
    height: 100px;
    background: #fff;
  }

  &::before {
    top: -100px;
  }

  &::after {
    bottom: -100px;
  }
}

::beforeはviewportの上側、::afterは下側に、画面外から背景色を置いています。
background: #fffの部分はサイトの背景色に合わせて変更します。

これでSafariが最初から背景色ありの状態として扱ってくれるので、サイドナビを開いたあとだけ色が変わる違和感を減らせました。

注意

これはiOS26 Safari向けの回避策です。
仕様としてきれいに制御しているというより、SafariのUI背景判定に合わせて見た目を安定させるための対応、という感じですね〜

背景を透過させたい場合には逆に邪魔になるので、あくまで「途中で変わるくらいなら最初から色を付ける」ためのメモでした。

以上、おわり。