openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match nav-bottom blur style in safe-area body::after on iOS PWA

Browse Source
This commit is contained in:
Ulas
2026-04-16 09:19:04 +02:00
parent 9ef9680e82
commit fc8a4ce046
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/pwa.css
+5 -3
View File
@@ -79,8 +79,8 @@ nav,
/* iOS PWA: Schwarzen Streifen unter der Nav verhindern. /* iOS PWA: Schwarzen Streifen unter der Nav verhindern.
* iOS reserviert den Home-Indicator-Bereich unterhalb des CSS-Viewports. * iOS reserviert den Home-Indicator-Bereich unterhalb des CSS-Viewports.
* Ein ::after-Element mit fester Position füllt diesen Bereich mit der * Das ::after-Element bekommt denselben Blur+Hintergrund wie .nav-bottom,
* Surface-Farbe, sodass kein schwarzer Spalt sichtbar ist. */ * damit kein Farbunterschied zwischen Nav-Bar und Safe-Area-Bereich entsteht. */
body::after { body::after {
content: ''; content: '';
position: fixed; position: fixed;
@@ -88,7 +88,9 @@ nav,
left: 0; left: 0;
right: 0; right: 0;
height: env(safe-area-inset-bottom, 0px); height: env(safe-area-inset-bottom, 0px);
background-color: var(--color-surface); background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
z-index: var(--z-nav); z-index: var(--z-nav);
} }
} }