Changeset a036251 in Klonkt for src/assets/css

Timestamp:

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

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

76f0e61

Parents:

7ca3ffc

Message:

fix(ios): hand-built safe-area inset (env() returns 0 on iOS Safari + standalone)

env(safe-area-inset-top) resolves to 0 on this iOS in both Safari and the installed PWA
(content under the camera). A boot script measures the inset directly and, if it comes
back empty on a notch/Dynamic-Island iPhone (logical height >= 812), falls back to a fixed
50px. The masthead padding reads --ios-safe-top. CSS buster -> v54.

File:

• src/assets/css/style.css (modified) (5 diffs)

src/assets/css/style.css

@@ -63 +63 @@
     --radius: 8px; --transition: 180ms cubic-bezier(.4,0,.2,1);
     --safe-top: env(safe-area-inset-top, 0); --safe-bot: env(safe-area-inset-bottom, 0);
+    /* iOS top inset: starts from env(), but a tiny boot script overrides it with a
+       real/measured value (env() resolves to 0 in some iOS standalone states). */
+    --ios-safe-top: env(safe-area-inset-top, 0px);
     color-scheme: light dark;
 }
@@ -507 +510 @@
 .masthead {
     border-bottom: 1px solid var(--rule);
-    padding: calc(1rem + env(safe-area-inset-top, 0px)) 0 1rem;
+    padding: calc(1rem + var(--ios-safe-top, 0px)) 0 1rem;
     /* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
        frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
@@ -1620 +1623 @@
         border-top-right-radius: 0;
         box-shadow: none;
-        padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
+        padding-top: calc(.75rem + var(--ios-safe-top, 0px));
         padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
     }
@@ -1678 +1681 @@
 }
 @media (max-width: 400px) {
-    .masthead { padding: calc(.5rem + env(safe-area-inset-top, 0px)) 0 .5rem; }
+    .masthead { padding: calc(.5rem + var(--ios-safe-top, 0px)) 0 .5rem; }
     .masthead-inner { gap: .25rem; }
     .site-title { font-size: 1.05rem; }
@@ -2759 +2762 @@
 
 /* Masthead: compacter */
-.masthead { padding: calc(.55rem + env(safe-area-inset-top, 0px)) 0 .55rem; }
+.masthead { padding: calc(.55rem + var(--ios-safe-top, 0px)) 0 .55rem; }
 .masthead-inner { gap: 1rem; }
 .site-title { font-size: 1.25rem; }