Fix: iOS Bottom-Nav — #app position:fixed+inset:0, Nav als Flex-Kind
position:fixed auf #bottom-nav funktioniert in iOS PWA-Standalone-Mode nicht zuverlässig (driftet beim Scrollen). Fix: #app selbst position:fixed;inset:0 → Nav ist normales Flex-Kind am unteren Rand → kein iOS-Fixed-Bug möglich. Desktop: #app position:static via Media Query. SW by-v529, APP_VER 506
This commit is contained in:
parent
1056824be3
commit
cd5688ae8f
3 changed files with 25 additions and 34 deletions
|
|
@ -7,51 +7,48 @@
|
||||||
/* ------------------------------------------------------------
|
/* ------------------------------------------------------------
|
||||||
1. APP SHELL
|
1. APP SHELL
|
||||||
------------------------------------------------------------ */
|
------------------------------------------------------------ */
|
||||||
|
/* Mobile: #app als fixed Container — einzig zuverlässiger iOS-PWA-Fix.
|
||||||
|
#bottom-nav braucht dann kein position:fixed mehr, er ist Flex-Kind
|
||||||
|
am unteren Rand des fixierten Containers. */
|
||||||
#app {
|
#app {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100dvh;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Content-Bereich: window scrollt — kein overflow-y hier.
|
/* Content-Bereich scrollt intern */
|
||||||
position:fixed auf #bottom-nav funktioniert auf iOS nur zuverlässig
|
|
||||||
wenn der window-scroll aktiv ist, nicht ein innerer Scroll-Container. */
|
|
||||||
#page-content {
|
#page-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: visible;
|
min-height: 0;
|
||||||
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-bottom: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Vollbild-Seiten (Karte, Routen, Chat, Gassi, Sitting):
|
/* Vollbild-Seiten: #page-content kein Scroll */
|
||||||
window-scroll deaktivieren, intern scrollen */
|
|
||||||
body.page-fullscreen {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100dvh;
|
|
||||||
}
|
|
||||||
body.page-fullscreen #app {
|
|
||||||
height: 100dvh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
body.page-fullscreen #page-content {
|
body.page-fullscreen #page-content {
|
||||||
flex: 1;
|
overflow: hidden;
|
||||||
min-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop: Sidebar-Layout — kein Bottom-Nav */
|
/* Desktop: normaler Dokumentfluss, Sidebar-Layout */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
#app {
|
#app {
|
||||||
|
position: static;
|
||||||
|
min-height: 100dvh;
|
||||||
|
overflow: visible;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
#page-content {
|
#page-content {
|
||||||
|
min-height: unset;
|
||||||
|
overflow-y: visible;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
padding-left: var(--nav-sidebar-width);
|
padding-left: var(--nav-sidebar-width);
|
||||||
}
|
}
|
||||||
body.page-fullscreen,
|
|
||||||
body.page-fullscreen #app,
|
|
||||||
body.page-fullscreen #page-content {
|
body.page-fullscreen #page-content {
|
||||||
height: auto;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -180,15 +177,9 @@ body.page-fullscreen #page-content {
|
||||||
3. BOTTOM NAVIGATION (Mobile)
|
3. BOTTOM NAVIGATION (Mobile)
|
||||||
------------------------------------------------------------ */
|
------------------------------------------------------------ */
|
||||||
#bottom-nav {
|
#bottom-nav {
|
||||||
position: fixed;
|
/* Flex-Kind statt position:fixed — kein iOS-Drift mehr */
|
||||||
bottom: 0;
|
flex-shrink: 0;
|
||||||
left: 0;
|
z-index: 700;
|
||||||
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));
|
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 = '505'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
const APP_VER = '506'; // ← 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-v528';
|
const CACHE_VERSION = 'by-v529';
|
||||||
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