From a7ac7d105cb9fe6d6320c51be4ac5570e628cf04 Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Thu, 16 Apr 2026 12:48:43 +0200
Subject: [PATCH] fix: remove will-change from nav-bottom and add iOS height
 fallback

will-change: transform on a position:relative flex child causes iOS WebKit
to composite the element at an incorrect position - creating a visible gap
below the nav bar. Remove it; CSS transform transitions use hardware
acceleration automatically on modern iOS without this hint.

Add -webkit-fill-available before 100dvh on .app-shell as a fallback for
iOS WebKit versions where 100dvh is computed slightly smaller than the
actual WKWebView height.
---
 CHANGELOG.md             | 5 +++++
 package.json             | 2 +-
 public/styles/glass.css  | 3 ++-
 public/styles/layout.css | 4 ++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19a924e..9754ad7 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.20.5] - 2026-04-16
+
+### Fixed
+- iOS PWA: persistent gap between the bottom navigation bar and the physical screen edge. Two root causes addressed: (1) `will-change: transform` on the flex-child nav caused iOS WebKit's compositor to misplace the GPU layer — removed permanently; CSS `transform` transitions work with hardware acceleration on modern iOS without this hint. (2) Added `-webkit-fill-available` as a height fallback before `100dvh` on `.app-shell` to guard against iOS WebKit versions where `100dvh` is computed slightly smaller than the actual WKWebView height.
+
 ## [0.20.4] - 2026-04-16
 
 ### Fixed
diff --git a/package.json b/package.json
index 01b12e3..cfd5a95 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oikos",
-  "version": "0.20.4",
+  "version": "0.20.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/glass.css b/public/styles/glass.css
index ab6066b..d347389 100644
--- a/public/styles/glass.css
+++ b/public/styles/glass.css
@@ -349,7 +349,8 @@ textarea.form-input {
     transform var(--transition-base) var(--ease-out),
     background-color var(--transition-fast),
     box-shadow var(--transition-fast);
-  will-change: transform;
+  /* will-change: transform absichtlich weggelassen - auf iOS (WebKit) korrumpiert die
+   * dauerhafte GPU-Layer-Promotion eines position:relative Flex-Kinds dessen Position. */
 }
 
 .nav-bottom--hidden {
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 7dffffa..fb04b81 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -17,6 +17,10 @@
 .app-shell {
   display: flex;
   flex-direction: column;
+  /* -webkit-fill-available als iOS-Fallback: In manchen iOS-WebKit-Versionen
+   * ist 100dvh minimal kleiner als die tatsächliche WKWebView-Höhe, was zu einem
+   * sichtbaren Streifen unten führt. -webkit-fill-available füllt zuverlässig. */
+  height: -webkit-fill-available;
   height: 100dvh;
 }