experimental countermeasure for iOS 27 beta status bar dropshadow
Hunter
Sunday, August 30th, 2026 at 8:14 PM
27 <link rel="stylesheet" href="resources/styles.css">
28 </head>
29 <body>
30 + <!-- counteract colored drop shadow on iOS 27 beta status bar -->
31 + <div id="status-bar-tint" aria-hidden="true"></div>
32 +
33 <div id="boxes">
34 <div id="left-box">
35 <div id="map-container"></div>
6 "start_url": "./",
7 "scope": "./",
8 "display": "standalone",
- "background_color": "antiquewhite",
- "theme_color": "antiquewhite",
9 + "background_color": "#faebd7",
10 + "theme_color": "#faebd7",
11 "icons": [
12 {
13 "src": "resources/icon.png",
3 --type-char-ms: 0.5ms;
4 --event-color: antiquewhite;
5 --link-pad: 6px;
6 + --status-tint-h: 16px;
7 }
8
9 html, body {
21 background: antiquewhite;
22 }
23
24 +#status-bar-tint {
25 + display: none;
26 +}
27 +/* counteract colored drop shadow on iOS 27 beta status bar */
28 +@media (display-mode: standalone) {
29 + #status-bar-tint {
30 + display: block;
31 + position: fixed;
32 + top: 0;
33 + left: 0;
34 + right: 0;
35 + height: var(--status-tint-h);
36 + z-index: 2000;
37 + pointer-events: none;
38 + background-color: var(--event-color);
39 + transition: background-color var(--color-shift-ms) ease-in-out;
40 + }
41 +}
42 +
43 #boxes {
44 display: flex;
45 flex-direction: row;