bleed
+ v2.0.1 ++ Zero-config iOS Safari chrome染色. The status bar and URL bar follow your page + content at each viewport edge — gradients, sections, rubber-band overscroll, all + automatic. +
+$ npm install bleed +> import 'bleed/auto';+
↓ scroll to see染色 follow ↓
+The four-day rabbit hole
++ iOS Safari染色 the chrome with whatever sits at the viewport edge — but the rules + are quirky, undocumented, and shift between versions. You ship a page with a + gradient hero, and: +
+-
+
- + The viewport bottom染色 mint while your belt section is dark teal — visible + seam at the chrome boundary. + +
-
+ Compact tab bar appears; chrome染色 "shifts" 30px because
+
100lvh − 100svhdoesn't match the current chrome height. +
+ - + User pulls past the footer — rubber-band overscroll exposes the html + background-color, which is the wrong color. + +
-
+
theme-colormeta is ignored on iOS 26. +
+ -
+
body::beforewith fixed gradient + stretches into the overscroll exposed area and overrides + whatever you set on<html>. +
+
+ bleed walks the rabbit hole for you. One import. Done.
+
+
What it handles
+Smart per-edge染色
+
+
-
-
- Gradient territory
+Probe the body::before gradient at the chrome boundary and染色 chrome to match.
-
-
-
+
+
-
-
-
-
+
- Mid-page sections
+退場 — let Safari render its native translucent chrome over the section.