diff --git a/CHANGELOG.md b/CHANGELOG.md index 7328966..9307fd5 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.19.5] - 2026-04-14 + +### Fixed +- iOS PWA: black gap below bottom navigation in standalone mode - iOS reserves the home indicator area outside the CSS viewport, leaving a visible black strip. A fixed `::after` pseudo-element on `body` now fills this area with the surface color. Also added explicit `background-color` to `body` element. + ## [0.19.4] - 2026-04-14 ### Fixed diff --git a/package.json b/package.json index f865bdf..7122007 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.19.4", + "version": "0.19.5", "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/pwa.css b/public/styles/pwa.css index 9c72759..99ea70f 100644 --- a/public/styles/pwa.css +++ b/public/styles/pwa.css @@ -76,4 +76,19 @@ nav, .app-content { overscroll-behavior-y: contain; } + + /* iOS PWA: Schwarzen Streifen unter der Nav verhindern. + * iOS reserviert den Home-Indicator-Bereich unterhalb des CSS-Viewports. + * Ein ::after-Element mit fester Position füllt diesen Bereich mit der + * Surface-Farbe, sodass kein schwarzer Spalt sichtbar ist. */ + body::after { + content: ''; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: env(safe-area-inset-bottom, 0px); + background-color: var(--color-surface); + z-index: var(--z-nav); + } } diff --git a/public/styles/reset.css b/public/styles/reset.css index f255fbb..888b1c7 100644 --- a/public/styles/reset.css +++ b/public/styles/reset.css @@ -29,6 +29,7 @@ html { body { height: 100dvh; overflow: hidden; + background-color: var(--color-bg); } img, svg, video {