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:
rene 2026-04-30 08:04:11 +02:00
parent 1056824be3
commit cd5688ae8f
3 changed files with 25 additions and 34 deletions

View file

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

View file

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

View file

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