From 00afd37c90b0cf8db0d43fe8c9555c9fecdbf76c Mon Sep 17 00:00:00 2001 From: Ulas Kalayci Date: Wed, 22 Apr 2026 12:39:00 +0200 Subject: [PATCH] chore: release v0.23.12 --- CHANGELOG.md | 5 ++++ package-lock.json | 4 ++-- package.json | 2 +- public/styles/layout.css | 4 ---- public/styles/pwa.css | 50 ++++++++++++++++++++++------------------ public/styles/reset.css | 2 -- 6 files changed, 35 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d553301..a1de0cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.23.12] - 2026-04-22 + +### Fixed +- iOS PWA: bottom navigation bar gap resolved by removing `overflow: hidden` from `` (iOS Safari bug: this property clips `position: fixed` descendants) and restoring the `body::after` fill approach; nav bar height is no longer inflated by the safe area padding + ## [0.23.11] - 2026-04-22 ### Fixed diff --git a/package-lock.json b/package-lock.json index 8f41d7f..8367364 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oikos", - "version": "0.23.11", + "version": "0.23.12", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oikos", - "version": "0.23.11", + "version": "0.23.12", "license": "MIT", "dependencies": { "bcrypt": "^6.0.0", diff --git a/package.json b/package.json index 143b333..77e26a4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.23.11", + "version": "0.23.12", "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.", "main": "server/index.js", "type": "module", diff --git a/public/styles/layout.css b/public/styles/layout.css index bebcd98..f428a97 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -144,10 +144,6 @@ z-index: var(--z-nav); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); - /* Füllt den iOS Home-Indicator-Bereich mit dem Nav-Hintergrund. - * Das padding erstreckt den Hintergrund der Nav bis zum physischen Bildschirmrand, - * ohne das Flex-Layout der App-Shell zu beeinflussen (nav-bottom hat kein flex-grow). */ - padding-bottom: env(safe-area-inset-bottom, 0px); } /* ── Items-Reihe ── */ diff --git a/public/styles/pwa.css b/public/styles/pwa.css index 0f29da8..f346b27 100644 --- a/public/styles/pwa.css +++ b/public/styles/pwa.css @@ -5,10 +5,15 @@ */ /* ── Kein Rubber-Banding, kein Body-Scroll ── - * overflow: hidden verhindert, dass body scrollbar wird, falls ein - * Element minimal überläuft. overscroll-behavior: none deaktiviert - * Pull-to-Refresh und Rubber-Banding. */ -html, body { + * overflow: hidden NUR auf body - NICHT auf html setzen. + * iOS Safari Bug: overflow:hidden auf clippt position:fixed-Elemente, + * was body::after (Safe-Area-Fill) unsichtbar macht. + * overscroll-behavior: none auf html+body deaktiviert Pull-to-Refresh/Rubber-Banding. */ +html { + overscroll-behavior: none; +} + +body { overflow: hidden; overscroll-behavior: none; } @@ -21,8 +26,7 @@ html, body { /* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ── * Nur horizontale Safe Areas auf body. Vertikale Safe Areas werden über - * .app-shell (padding-top im Standalone-Modus) und die Seiten-/Nav-Berechnungen - * (padding-bottom via --safe-area-inset-bottom) gehandhabt. + * .app-shell (padding-top im Standalone-Modus) und body::after (unten) gehandhabt. * KEIN body padding-top/bottom - das würde .app-shell (height: 100dvh) * um den Safe-Area-Betrag aus dem Viewport schieben und Scroll-Bleed erzeugen. */ body { @@ -30,13 +34,6 @@ body { padding-right: env(safe-area-inset-right); } -/* ── Bottom Nav über der Gesture Bar ── - * layout.css nutzt --safe-area-inset-bottom Token; - * hier als Fallback direkt via env() */ -/*.nav-bottom { - padding-bottom: env(safe-area-inset-bottom); -}*/ - /* Touch-Targets werden über tokens.css (--target-sm/md/lg) und * komponentenspezifische Styles gehandhabt - siehe Redesign Phase E. * Keine globale min-size-Regel hier, da sie mit dem bestehenden @@ -77,14 +74,21 @@ nav, overscroll-behavior-y: contain; } - /* iOS PWA: Schwarzen Streifen unter der Nav verhindern. - * iOS reserviert den Home-Indicator-Bereich unterhalb des CSS-Viewports. - * body::after füllt diesen Bereich mit dem gleichen Glass-Hintergrund wie die Nav. - * z-index: z-nav - 1 (unter der Nav) - dadurch rendert die Nav immer oben. - * Im Überlappungsbereich (Nav-Padding = Safe-Area) liegt die Nav darüber; - * in einem eventuellen Spalt zwischen Nav-Unterkante und Displayrand liegt - * body::after sichtbar - optisch identisch mit der Nav. */ - /* body::after-Ansatz entfernt: layout.css setzt padding-bottom auf .nav-bottom - * direkt via env(safe-area-inset-bottom), was zuverlässiger ist als ein - * Fixed-Pseudo-Element (kann bei overflow:hidden auf html/body geclipt werden). */ + /* iOS PWA: Home-Indicator-Bereich unter der Nav füllen. + * position:fixed ist erforderlich, damit body::after auch dann sichtbar ist, + * wenn der App-Shell-Inhalt den Home-Indicator-Bereich nicht erreicht. + * Funktioniert nur wenn html KEIN overflow:hidden hat (iOS Safari Bug: + * overflow:hidden auf clippt position:fixed-Elemente). */ + body::after { + content: ''; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: env(safe-area-inset-bottom, 0px); + 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: calc(var(--z-nav) - 1); + } } diff --git a/public/styles/reset.css b/public/styles/reset.css index 888b1c7..a342a58 100644 --- a/public/styles/reset.css +++ b/public/styles/reset.css @@ -21,9 +21,7 @@ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - /* iOS PWA: verhindert Body-Scroll, der position:fixed-Elemente verschiebt */ height: 100%; - overflow: hidden; } body {