iOS 26.0のSafariでタブバーを単色にするハック的な何か

iOS 26.0のSafariで、タブバーを単色にしたい人向けのハックです。

<div class="veil" aria-hidden="true">
  <div class="veil-overlay"></div>
</div>

<style>
.veil {
  display: none;
}
@supports (-webkit-touch-callout: none) {
  .veil {
    position: sticky;
    top: 0;
    z-index: 10000;
    display: block;
    pointer-events: none;
  }
  .veil-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    backdrop-filter: blur(1px);
  }
}
</style>

• CodePen
• 動作確認ページ

iPhoneのサイトでタブバーが単色だったので、ページを解析して色々と試した結果、上記のコードで思い通りになりました。コピペでタブバーが単色になると思います。

色はbodyの背景色を参照していそう？動的に色を変えられるのが理想ですが、bodyの背景色をJSで変更してもタブバーの色は変わりませんでした。

これが機能する理由は推測になりますが、Glassの裏にBlurがあると描画が辛いんですかね。だいぶ邪悪な実装なので副作用にご注意を。

iOS 26.1ではこんな実装が不用になりますように。