add ios 27 pwa status bar blur workaround
Hunter
Thursday, October 29th, 2026 at 10:24 AM
6 <title>Web Workshop</title>
7 <link rel="icon" href="resources/icons/construction.png">
8 <link rel="manifest" href="manifest.json">
9 + <script>
10 + if (/iPad|iPhone|iPod/.test(navigator.userAgent) ||
11 + (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1)) {
12 + document.documentElement.classList.add("is-ios");
13 + }
14 + </script>
15 <link rel="stylesheet" href="resources/css/styles.css">
16 <script type="module">
17 import {EditorView, keymap, placeholder, lineNumbers, Decoration, EditorState, Compartment, defaultKeymap, indentWithTab, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, html, githubDark, indentUnit, search, searchKeymap, closeSearchPanel, openSearchPanel} from "./resources/js/codemirror-bundle.js"
19 </script>
20 </head>
21 <body>
22 + <div id="status-bar-tint" aria-hidden="true"></div>
23 +
24 <div class="editor-pane">
25 <div id="editor"></div>
26 </div>
1 :root {
2 --text-color: #f8f8f2;
3 --editor-bg: #16181b;
4 + --status-tint-h: 16px;
5 scrollbar-color: grey var(--editor-bg);
6 }
7
29 overflow: hidden;
30 }
31
32 +#status-bar-tint {
33 + display: none;
34 +}
35 +@media (display-mode: standalone) and (orientation: portrait) {
36 + .is-ios #status-bar-tint {
37 + display: block;
38 + position: fixed;
39 + top: 0;
40 + left: 0;
41 + right: 0;
42 + height: calc(env(safe-area-inset-top) + var(--status-tint-h));
43 + z-index: 10000;
44 + pointer-events: none;
45 + background-color: var(--editor-bg);
46 + }
47 + .is-ios body:has(.preview-pane.fullscreen) #status-bar-tint {
48 + background-color: white;
49 + }
50 + .is-ios .preview-pane {
51 + padding-top: calc(env(safe-area-inset-top) + var(--status-tint-h));
52 + }
53 +}
54 +
55 .editor-pane {
56 width: 50%;
57 height: 100%;