rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Run the top bar's colour up behind the Dynamic Island on iOS 26 (#147)

Browse Source 
46f9370 set theme-color, but Safari 26 ignores it. iOS 26 paints the strip behind the status bar
and the island in the background colour of a sticky or fixed element at the page's top edge, and
failing that the root's. The top bar was neither, and the root had no colour of its own (only
body did), so iOS used black or white: a band of another colour above the bar.

The bar is sticky now, though nothing scrolls under it, so iOS reads its colour; the root has the
page's background for screens with nothing at the top edge; Classic's metal bar gets a colour
under its gradient, the top of the metal, since iOS reads no gradient. theme-color stays, set to
the bar's colour, for iPhones before iOS 26 and for Android. Glass's bar is see-through, so iOS
frosts what is under it there, as the bar itself does.

Taken from developers' reports of iOS 26, not Apple's documentation, and not yet seen on a phone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-09 00:50:28 +00:00
parent 46f9370018
commit a553931c76
4 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app.css
View File

@@ -458,6 +458,10 @@
/* A rule that sets display beats the UA's [hidden], and several below do. */
[hidden]{display:none!important}
html,body{height:100%}
/* What iOS paints behind the status bar where nothing sticky is at the top edge, as in the
reader on a phone, which brings its own. With no colour of its own, the root went black or
white there instead (#147). */
html{background-color:var(--bg)}
body{
margin:0;background:var(--bg);color:var(--fg);
font:14.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
@@ -522,6 +526,10 @@ a{color:var(--accent)}
padding-top:calc(7px + var(--safe-t));padding-bottom:7px;
padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r));
background:var(--panel);border-bottom:1px solid var(--line);
/* Nothing scrolls under it: it is sticky only because iOS 26 paints the strip behind the status
bar and the Dynamic Island in the colour of a sticky or fixed bar at the top edge, and ignores
theme-color, so the bar now runs all the way up behind the island (#147). */
position:sticky;top:0;
}
#topbar .grow{flex:1}
#topbar #epSearch{width:260px;flex:none}
@@ -1265,6 +1273,8 @@ body:has(#player.on) #status{padding-bottom:3px}
:root[data-theme="classic"] #topbar,
:root[data-theme="classic"] #status,
:root[data-theme="classic"] #player{background:linear-gradient(#ececec,#c9c9c9);border-color:#8e8e8e;color:#1a1a1a}
/* The colour iOS takes for above the bar, where it reads no gradient: the top of the metal. */
:root[data-theme="classic"] #topbar{background-color:#ececec}
:root[data-theme="classic"] #status{text-align:center}
:root[data-theme="classic"] #sidebar{background:#e7ebf1;border-right-color:#a3a3a3}
:root[data-theme="classic"] #files{background:#f4f4f4}