Fix: Bottom-Nav iOS — window scrollt statt #page-content
position:fixed funktioniert auf iOS nur stabil wenn der window-scroll aktiv ist. Innere Scroll-Container lassen fixed-Elemente während des Scrollens 'driften'. - #page-content: overflow:visible (window scrollt) - body.page-fullscreen: Klasse für Karte/Routen/Chat/Gassi/Sitting → dort overflow:hidden + interner Scroll wie bisher - navigate(): setzt/entfernt page-fullscreen bei jedem Seitenwechsel - SW by-v527, APP_VER 504
This commit is contained in:
parent
61be87f29e
commit
359d46d9bc
3 changed files with 35 additions and 9 deletions
|
|
@ -13,26 +13,47 @@
|
|||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
|
||||
/* Content-Bereich: window scrollt — kein overflow-y hier.
|
||||
position:fixed auf #bottom-nav funktioniert auf iOS nur zuverlässig
|
||||
wenn der window-scroll aktiv ist, nicht ein innerer Scroll-Container. */
|
||||
#page-content {
|
||||
flex: 1;
|
||||
min-height: 0; /* iOS-Flex-Bug: ohne das scrollt body statt #page-content */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: visible;
|
||||
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Desktop: Sidebar-Layout — kein Bottom-Nav, natürliche Höhe */
|
||||
/* Vollbild-Seiten (Karte, Routen, Chat, Gassi, Sitting):
|
||||
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 {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Desktop: Sidebar-Layout — kein Bottom-Nav */
|
||||
@media (min-width: 768px) {
|
||||
#app {
|
||||
flex-direction: row;
|
||||
}
|
||||
#page-content {
|
||||
min-height: unset;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--nav-sidebar-width);
|
||||
}
|
||||
body.page-fullscreen,
|
||||
body.page-fullscreen #app,
|
||||
body.page-fullscreen #page-content {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue