オープンソース · MITライセンス · Safari ファミリー
bleedblend
**ゼロ設定の Safari chrome 着色 — iPhone・iPad・Mac に対応。**
import 一行で、Safari のステータスバーとアドレスバーをビューポートの各端でページ内容と同じ色に。グラデーション・不透明セクション・ラバーバンドのオーバースクロールを自動処理し、theme-color の調整も着色設定も不要です。bleedblend は Safari ネイティブの着色を「馴らす」もので、別レイヤーを描くわけではありません。Safari 26 の Liquid Glass はこの着色を iPhone・iPad・Mac に横断させるため、同じページ構造が Safari ファミリー全体で予測可能になります——iOS では癖を能動的に捌き、Mac ではモデルが統一されたためそのまま機能します。
動作の仕組み
1.
発生する問題
Safari 26 は chrome（ステータスバーとアドレスバー）の色を「ビューポート端にある要素」で決めます。このモデルは iPhone・iPad・Mac で共通です。ただしそのルールは分かりにくく、ドキュメントもなく、バージョンごとに変わります——そして iPhone と iPad で最も顕著です：グラデーションには継ぎ目が出る、コンパクトなタブバーで着色が約 30px ずれる、ラバーバンドのオーバースクロールで誤った背景色が露出する、そして `theme-color` は iOS 26 では単純に無視されます。
2.
解決策
`import 'bleedblend/auto'` を一度追加するだけ。bleedblend は scroll・resize・visualViewport イベントを監視し、各ビューポート端ごとに Safari の自然なサンプリングに任せるか、正しい色の小さな着色を描画するかを判断します。グラデーションの色は、手書きの配列ではなくページから直接読み取ります。
3.
得られる効果
ステータスバーとアドレスバーがページと完全に同期します。グラデーションは chrome まで延長され、ページ末尾ではフッターの色が引き継ぎ、iOS のラバーバンドオーバースクロールもフォールバック背景を露出させず同じ色で塗られます。
機能一覧
ゼロ設定の自動検出
`import 'bleedblend/auto'` が API のすべてです。`body::before`・`body`・`<html>` からグラデーションの色を読み取り、各端に適した chrome の色を自動計算します。色配列の管理は不要です。
端ごとのステートマシン
各ビューポート端で3つの状態から1つを選択します。あなたが持つ sticky ヘッダー/フッターに委ねる、Safari のネイティブサンプリングが正しいときは退く、誤った色になる場合のみ着色する、の3つです。
オーバースクロールとグラデーション処理
グラデーションを chrome まで延長し、`<html>`・`<body>`・`body::before` を同時に上書きすることで、iOS のラバーバンドオーバースクロールも同じ色に。ページ末尾で背景が漏れません。
フレームワーク非依存 ＋ Tailwind
import 一行であらゆるフレームワークから利用でき、SPA のページ遷移用に `onPageLoad` フックも用意。Tailwind プラグインと `.bleedblend-top` / `.bleedblend-bottom` クラスも同梱——これは自分の sticky ヘッダーやフッターに chrome を「意図して」着色させるためのレシピで、Safari ファミリー全体で機能します。
導入方法
npmから `bleedblend` をインストール（またはソースをコピー）し、ビューポートのメタを `viewport-fit=cover` に設定して、エントリーポイントに `import 'bleedblend/auto'` を追加するだけ。この一行が導入のすべてです。セクションセレクタやページ遷移フックをカスタマイズしたい場合は `bleedblend/utils` の `createBleedblendAuto()` を使います。