Changeset 76f0e61 in Klonkt

Timestamp:

06/26/2026 03:32:31 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

b8bbe77

Parents:

a036251

Message:

fix(ios pwa): force masthead safe-area inline + detect standalone + bump SW

The PWA kept serving a stale shell so the env-based fix never reached it. Now: detect
standalone explicitly (larger Dynamic-Island fallback), set --ios-safe-top AND force the
masthead padding inline (survives a stale cached stylesheet), re-apply after htmx chrome
swaps. Bumped the service worker cache (v11 -> v12) so the PWA refreshes.

Location:

src

Files:

• server.js (modified) (1 diff)
• views/shell.ejs (modified) (2 diffs)

src/server.js

@@ -395 +395 @@
   res.set('Cache-Control', 'no-cache');
   res.send(`
-const CACHE_VERSION = 'pcms-v11-' + new Date().toISOString().split('T')[0];
+const CACHE_VERSION = 'pcms-v12-' + new Date().toISOString().split('T')[0];
 self.addEventListener('install', e => {
   e.waitUntil(caches.open(CACHE_VERSION).then(c => c.addAll(['/'])));

src/views/shell.ejs

@@ -200 +200 @@
 <link rel="stylesheet" href="/assets/css/style.css?v=54">
 <script>
-/* iOS safe-area, built by hand: env(safe-area-inset-top) resolves to 0 in some iOS
-   states (Safari + standalone) even with viewport-fit=cover. Measure it directly, and
-   if it comes back empty on a notch/Dynamic-Island iPhone, fall back to a fixed inset.
-   The masthead reads --ios-safe-top. */
+/* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
+   BOTH Safari and the installed PWA (standalone), even with viewport-fit=cover, so the
+   masthead can't clear the camera. We measure env directly and, when it comes back empty
+   on a notched iPhone, fall back to a fixed inset (a bit larger in standalone for the
+   Dynamic Island). We set --ios-safe-top AND force the masthead padding inline — the
+   latter survives a stale cached stylesheet that lacks the var. Re-applied after htmx
+   chrome swaps (the top-nav is out-of-band swapped on navigation). */
 (function(){
   var ua = navigator.userAgent || '';
   var isIOS = /iP(hone|od|ad)/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
   if (!isIOS) return;
-  function setInset(){
+  var standalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || navigator.standalone === true;
+  function apply(){
     if (!document.body) return;
     var p = document.createElement('div');
@@ -215 +219 @@
     var i = parseFloat(getComputedStyle(p).paddingTop) || 0;
     p.remove();
-    // env() gave nothing but this looks like a notched iPhone (logical height >= 812)
-    // -> use a fixed status-bar inset so the masthead clears the camera anyway.
-    if (i < 20 && Math.max(screen.width, screen.height) >= 812) i = 50;
+    if (i < 20 && Math.max(screen.width, screen.height) >= 812) i = standalone ? 59 : 47;
     document.documentElement.style.setProperty('--ios-safe-top', i + 'px');
-  }
-  if (document.body) setInset(); else document.addEventListener('DOMContentLoaded', setInset);
-  window.addEventListener('orientationchange', function(){ setTimeout(setInset, 250); });
+    var mh = document.querySelector('.masthead');
+    if (mh) mh.style.paddingTop = 'calc(.55rem + ' + i + 'px)';
+  }
+  if (document.body) apply(); else document.addEventListener('DOMContentLoaded', apply);
+  document.addEventListener('htmx:afterSettle', apply);
+  window.addEventListener('orientationchange', function(){ setTimeout(apply, 250); });
 })();
 </script>