問題
iOS 26のSafariでは、上部のステータスバーと下部のタブバーが透過してしまい、背景が透けて見える問題が発生しています。
次の画像は、画面いっぱいにグレーの背景を敷いたときのSafariとArcでの見え方の差です。
| Safari | Arc |
|---|---|
 |
 |
解決策
mix-blend-mode: lighten を使った方法で、ステータスバーとタブバー両方の透過を防ぐことができます。
HTML
<!-- ステータスバー用 -->
<div class="for-status-bars"></div>
<!-- タブバー用 -->
<div class="for-tab-bars"></div>
ページの最後などに専用のdiv要素を追加します。
CSS
/* ステータスバー透過防止 */
.for-status-bars {
position: fixed;
top: 0;
pointer-events: none;
height: 5px;
width: 100%;
background-color: #000;
mix-blend-mode: lighten;
}
/* タブバー透過防止 */
.for-tab-bars {
position: fixed;
bottom: 0;
pointer-events: none;
height: 4px;
width: 100%;
background-color: #000;
mix-blend-mode: lighten;
}
仕組みの解説
ポイント1: 最小高さの要件
ステータスバーとタブバーでは、必要な最小高さが異なります。
/* ステータスバー */
height: 5px; /* 4px以下だと効かない */
/* タブバー */
height: 4px; /* 3px以下だと効かない */
- ステータスバー（上部）: 最低5px以上の高さが必要
- タブバー（下部）: 最低4px以上の高さが必要
これ以下のサイズでは、透過防止の効果が発動しません。
なぜこのサイズなのかはまったく分かりませんが、1pxずつ変えながら試したので恐らく間違いないと思います。
ただし、今後のアップデートで閾値が変わるかもしれませんからその点はご注意ください。
ポイント2: mix-blend-modeの活用
background-color: #000;
mix-blend-mode: lighten;
黒（#000）をlightenモードで被せることで、実際の表示色に影響を与えずに透過を防いでいます。
lightenモードは、背景色とブレンド色を比較して明るい方を表示するため、黒を被せても元の色がそのまま表示されます。
これにより、視覚的な変化を起こすことなく透過問題を解決できます。
ポイント3: ユーザー操作への配慮
pointer-events: none;
pointer-events: noneを指定することで、この要素がクリックやタップなどのユーザー操作を妨げないようにしています。
画面上部や下部に配置された要素でも、ユーザーの操作には影響しません。
完全な実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS 26 ステータスバー＆タブバー透過対策</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
.container {
padding: 3rem;
}
/* 背景設定 */
.background {
position: fixed;
background-color: #f0f0f0;
inset: -20px;
z-index: -1;
}
/* ステータスバー透過防止 */
.for-status-bars {
position: fixed;
top: 0;
pointer-events: none;
height: 5px;
width: 100%;
background-color: #000;
mix-blend-mode: lighten;
}
/* タブバー透過防止 */
.for-tab-bars {
position: fixed;
bottom: 0;
pointer-events: none;
height: 4px;
width: 100%;
background-color: #000;
mix-blend-mode: lighten;
}
</style>
</head>
<body>
<div class="container">
<!-- コンテンツ -->
</div>
<div class="background"></div>
<div class="for-status-bars"></div>
<div class="for-tab-bars"></div>
</body>
</html>
| Before | After |
|---|---|
|
 |
まとめ
- iOS 26のSafariではステータスバーとタブバーの両方が透過する問題がある
-
mix-blend-mode: lightenを使った固定配置要素で両方とも解決できる - 必要な最小高さ：ステータスバー5px、タブバー4px
- 黒を
lightenで被せることで、視覚的な影響を最小限に抑えられる -
pointer-events: noneでユーザー操作を妨げないようにする
ただしあくまでこの方法は暫定的な回避策です。
今後のアップデートで修正が行われることを期待します。