From bbedd658fa3f3f7d7893dcbd8828e29d87ae0456 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Thu, 30 Apr 2026 06:20:54 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Bottom-Nav=20iOS=20=E2=80=94=20min-heigh?=
 =?UTF-8?q?t:0=20auf=20#page-content=20+=20GPU-Layer=20auf=20#bottom-nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #page-content min-height:0: iOS-Flex-Bug — ohne das schrumpft der Container
  nicht und overflow-y:auto greift nicht → body scrollt statt #page-content
- #bottom-nav: transform:translateZ(0) + will-change:transform für stabile
  GPU-Compositing-Schicht auf iOS Safari
- #app: height:100% (kaskadiert von body) statt 100dvh
- SW by-v523, APP_VER 500
---
 backend/static/css/layout.css | 21 ++++++++++++++-------
 backend/static/js/app.js      |  2 +-
 backend/static/sw.js          |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css
index 48b669a..fc9d99d 100644
--- a/backend/static/css/layout.css
+++ b/backend/static/css/layout.css
@@ -8,19 +8,21 @@
    1. APP SHELL
    ------------------------------------------------------------ */
 #app {
-  display:    flex;
+  display:        flex;
   flex-direction: column;
-  height:     100dvh;   /* exakte Viewport-Höhe: body scrollt nie, nur #page-content */
-  overflow:   hidden;
+  /* height:100% kaskadiert von html→body→#app → exakter Scroll-Container */
+  height:         100%;
+  overflow:       hidden;
 }
 
 /* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
 #page-content {
-  flex:         1;
-  overflow-y:   auto;
-  overflow-x:   hidden;
+  flex:           1;
+  /* min-height:0 zwingt flex-child zum Schrumpfen → overflow-y greift auf iOS */
+  min-height:     0;
+  overflow-y:     auto;
+  overflow-x:     hidden;
   padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
-  /* -webkit-overflow-scrolling für iOS-Momentum-Scroll */
   -webkit-overflow-scrolling: touch;
 }
 
@@ -33,6 +35,7 @@
     overflow:       visible;
   }
   #page-content {
+    min-height:     unset;
     padding-bottom: 0;
     padding-left:   var(--nav-sidebar-width);
   }
@@ -174,6 +177,10 @@
   left:        0;
   right:       0;
   z-index:     700;  /* über Leaflet-Panes (~400) */
+  /* GPU-Layer erzwingen → iOS Safari fixed-position Stabilität */
+  transform:   translateZ(0);
+  -webkit-transform: translateZ(0);
+  will-change: transform;
   min-height:  calc(var(--nav-bottom-height) + var(--safe-bottom));
   padding-top:    var(--space-1);
   padding-bottom: calc(var(--safe-bottom) + var(--space-1));
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 3d48808..7911634 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '499'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '500'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 
diff --git a/backend/static/sw.js b/backend/static/sw.js
index ed8efb1..7501bec 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v522';
+const CACHE_VERSION = 'by-v523';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache