Fix: Bottom-Nav iOS — min-height:0 auf #page-content + GPU-Layer auf #bottom-nav

- #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
This commit is contained in:
rene 2026-04-30 06:20:54 +02:00
parent b27e4b006f
commit bbedd658fa
3 changed files with 16 additions and 9 deletions

View file

@ -8,19 +8,21 @@
1. APP SHELL 1. APP SHELL
------------------------------------------------------------ */ ------------------------------------------------------------ */
#app { #app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100dvh; /* exakte Viewport-Höhe: body scrollt nie, nur #page-content */ /* height:100% kaskadiert von html→body→#app → exakter Scroll-Container */
overflow: hidden; height: 100%;
overflow: hidden;
} }
/* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */ /* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
#page-content { #page-content {
flex: 1; flex: 1;
overflow-y: auto; /* min-height:0 zwingt flex-child zum Schrumpfen → overflow-y greift auf iOS */
overflow-x: hidden; min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
/* -webkit-overflow-scrolling für iOS-Momentum-Scroll */
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -33,6 +35,7 @@
overflow: visible; overflow: visible;
} }
#page-content { #page-content {
min-height: unset;
padding-bottom: 0; padding-bottom: 0;
padding-left: var(--nav-sidebar-width); padding-left: var(--nav-sidebar-width);
} }
@ -174,6 +177,10 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 700; /* über Leaflet-Panes (~400) */ 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)); min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
padding-top: var(--space-1); padding-top: var(--space-1);
padding-bottom: calc(var(--safe-bottom) + var(--space-1)); padding-bottom: calc(var(--safe-bottom) + var(--space-1));

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. 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 APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v522'; const CACHE_VERSION = 'by-v523';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache