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:
parent
b27e4b006f
commit
bbedd658fa
3 changed files with 16 additions and 9 deletions
|
|
@ -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));
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue