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
------------------------------------------------------------ */
#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));

View file

@ -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';

View file

@ -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