Safari の
Liquid Glass に思うこと

こんな症状があれば、同じ原因かもしれません。

• iPhone の Safari で、ステータスバー（時計や電池の部分）やアドレスバーの裏が、白や黒の帯になる
• position: fixed で固定したヘッダーやフッターの下に、すき間ができる。スクロール中の本文が見えてしまう
• theme-color を指定しても、バーの色が変わらない
• iOS 26 にしてから、全画面のデザインが、上下で切れて見える

何が起きたか

このサイトのトップは、3D の背景を画面いっぱいに敷いて、その上にロゴとメニューを固定しています。

iPhone の Safari で見ると、時計や電池のある上の部分と、アドレスバーのある下の部分が、単色で塗られていました。

Chrome では起きません。

映画館の映像みたいになっちゃう。

いつから起きていたのか

iOS 26 からで公開は 2025年9月。1年以上前から、こうなっていたことになります。

iOS 26 では、見た目が「Liquid Glass」というガラスのようなデザインに変わりました。

Safari のアドレスバーは、画面の下に浮かぶ、小さなガラスの部品になっています。

バーが浮いているので、その裏にもページが描かれます。

表示できる範囲が広がるのはうれしい変更ですが、結構なサイトで影響受けたんじゃないでしょうか。今更思う 笑

ヘッダーやフッターを固定しているサイトは全滅では？

問題は、ページの中に「画面の端に固定した部品」があるときです。

海外でも指摘されていた

国内の情報が意外にも少なかったので、海外のサイトでキレてる人いないか調べました。

ドイツの開発者 Thomas Günther さんの The web behind glass（2025年9月）

皮肉をこめて、「iOS 26 の Safari に合わせるなら、こうデザインしよう」という形で書かれています。

• 中間の明るさの色は避ける。うまく扱えるのは、暗い色か、白に近い色だけ
• 色の多い画像は避ける
• ページの上の部分に、部品を置かない。勝手にグラデーションが付く
• 画面の下に、部品を固定しない。ガラスの部品のまわりに、広い余白が取られる

最後に著者は、「自分の仕事では、この助言には従わない」と書いています。

固定ヘッダーは、ごく普通の作りです。それが、ブラウザの見た目の都合で、きれいに出せなくなりました。

「スマホでは、ヘッダーもフッターも固定で付けられないやん」という私のツッコミに近いかと

実機で確かめたこと

まず、決まりを知る必要があります。

色を付けた固定の部品を並べた確認用のページを作って、iPhone の実機で、12 通りの組み合わせを試しました。

端に接する固定の部品がある	Safari が、その部品の背景色で、時計の部分とアドレスバーの裏を不透明に塗る。帯になり、下の帯は本文も隠す
固定の部品が端に 1 つもない	帯はできない。本文が、時計の裏からアドレスバーの裏まで、画面いっぱいに描かれる
画面いっぱいの固定の背景	これだけで帯ができる。このサイトのトップは、3D の背景とヘッダーが原因だった
固定の部品を、下へはみ出させる	はみ出した部分は描かれない。帯の裏を埋めることはできない
::before・::after で色を置く	色は拾われない。拾われるのは、実際の要素の背景色だけ
theme-color	効かない
端から離れた小さな固定の部品	帯にならない（右下の丸いボタンなど）
sticky	文字はバーの裏に出るが、背景が付いてこない

※ 2026年11月に、iPhone の Safari（iOS 26 以降）で確かめた結果です。Apple が決まりを公開しているわけではないので、OS の更新で変わるかもしれません。

帯の色を決める手がかりは、Safari（iOS26）で背景を上下2色に分割するテクニック（Timelab テックブログ・bassy さん）を参考にしました。

「iOS 26 では theme-color が効かない」「上に固定した部品の背景色が、バーの色になる」という内容で、手元の結果とも合っています。

塗りつぶすか、裏まで描くか

対応は、大きく2つあります。

• 帯の色を、ページに合わせる固定の部品やページの背景色を整えて、帯を目立たなくします。手間は小さいです。ただ、帯そのものは残ります。
• 固定をやめて、バーの裏まで描く端に接する固定の部品をなくせば、帯はできません。画面いっぱいに表示されます。そのかわり、固定に見せる仕組みを、自分で作ることになります。

塗りつぶすのも、ありです。

でも、せっかく広がった表示領域を、単色でつぶしてしまうのは、もったいない。

このサイトのトップは、全画面で体験してもらうデザインです。帯があると、映画のレターボックスのように見えて、残念でした。

そこで、トップと下層ページで、やり方を分けました。

トップ：バーの裏まで描く

トップは、端に接する固定の部品を、すべてなくしました。

1. 背景と最初の画面を、固定（fixed）から absolute に変える。ページのいちばん上に置くだけなので、Safari は帯を作りません。
2. スクロールした分だけ、下へ動かす。CSS のスクロール連動アニメーションで、スクロールの長さと同じだけ動かします。見た目は、固定と同じです。
3. 背景を、上下に余分に広げる。3D の背景は、画面より上下 110px ずつ大きく描いて、時計の裏とアドレスバーの裏まで届かせます。
4. ロゴとメニューのボタンは、小さな固定の部品にする。ヘッダーの枠は固定せず、ロゴとボタンだけを、端から離して固定します。端から離れた小さな部品は、帯になりません。
5. いちばん上だけ、グラデーションでなじませる。スクロールしていないときは、時計の裏に描くものがないので、Safari がページの背景色で塗ります。そのすぐ下に明るい背景が来ると、そこだけ帯に見えます。ページの上端に、背景色から透明へのグラデーションを重ねて、境目をなくしました。

動かす部分は、こう書いています。

.hero, .closing, #canvas {
  position: absolute;   /* fixed をやめる */
  top: 0; left: 0;
  animation: follow linear both;
  animation-timeline: scroll(root block);
}
@keyframes follow {
  from { translate: 0 var(--off, 0px); }
  to   { translate: 0 calc(var(--range) + var(--off, 0px)); }
}

--range は、スクロールできる長さ（ページの高さ − 画面の高さ）です。

アドレスバーが出入りすると変わるので、JavaScript で見張って、変わったときだけ渡しています。

ここに行き着くまでに、いくつか失敗しました。

この作りは、iPhone の Safari（26 以降）だけに当てています。

ほかのブラウザは、今までどおりの固定のままです。困っていないものは、変えません。

泣く泣く消した、プログレスバー

ひとつだけ、あきらめたものがあります。

トップには、画面の下に、いま全体のどのあたりを見ているかを示すプログレスバーを固定していました。

Intro、Profile、Lab、Works、Skills と章の名前が並んでいて、押すとその章へ移動できます。

これは、画面の下端に固定した部品です。iOS 26 の Safari では、バーの下、つまりアドレスバーの裏に、スクロール中の本文がはみ出して見えてしまいます。

下へはみ出させても、描かれない。色で埋めれば、それが帯になる。いろいろ試しましたが、きれいに収める方法は見つかりませんでした。

気に入っていた部品でしたが、スマホでは、泣く泣く消しました。

章への移動は、ハンバーガーメニューからできます。パソコンでは、今までどおり表示しています。

下層ページ：ヘッダーを隠して、時計の裏を透かす

下層ページは、読むためのページです。トップほど凝ったことは、していません。

やったことは、3つです。

• 下へスクロールしたら、ヘッダーを隠す上へ戻すと、また出てきます。読んでいる間は、表示できる範囲を広く使えます。
• ヘッダーを、固定しない部品にするヘッダーを上へ隠しても、帯は消えませんでした。隠れたヘッダーが、ちょうど時計の裏にいるからです。固定の部品が上の端に接したままなので、Safari は塗りつぶしをやめません。そこで、トップと同じように、ヘッダーを absolute にして、スクロールした分だけ動かしました。ヘッダーが隠れている間は、時計の裏まで本文が見えます。
• ページの背景色を入れておく下層ページの帯は、白でした。ページの背景をグラデーションだけで指定していて、背景「色」が透明だったからです。Safari が拾うのは、色（background-color）です。

body {
  background: radial-gradient(ellipse at top, #13223d 0%, #0a1220 60%, #05080f 100%);
  background-color: #05080f;   /* これがないと、帯が白くなる */
}

暗い色のサイトで、上下だけ白くなっている場合は、ここを疑ってみてください。

同じことが起きていないか、確かめる

固定ヘッダーや、下に固定したボタンのあるサイトは、たくさんあります。

1年以上、気づかないままになっているサイトも、多いはずです。自分がそうでした。

• iPhone の Safari（iOS 26 以降）で開く。パソコンの画面を狭くしても、再現しません
• 時計の部分と、アドレスバーの裏の色を見る。ページの色と合っているか
• 下に固定した部品の下に、すき間や、スクロール中の本文が見えていないか
• 背景をグラデーションや画像だけで指定していないか。背景色も入れておく

色を合わせるだけなら、すぐに直せます。

全画面で見せたいサイトは、固定をやめるところまで、考えてみる価値があります。

使った技術

固定に見せる	position: absoluteCSS のスクロール連動アニメーション（animation-timeline: scroll()）使えないときは JavaScript（requestAnimationFrame）
背景	three.jsキャンバスを上下に 110px ずつ広げ、その分カメラの画角を広げる
当てる範囲	iPhone の Safari 26 以降だけ（ユーザーエージェントで判定）
下層ページ	スクロールでヘッダーを隠す JavaScriptヘッダーを position: absolute にして、スクロール連動アニメーションで動かすbackground-color の指定