fix: resolve iOS PWA bottom nav positioning via flex layout

Switch .nav-bottom from position: fixed to a flex child of .app-shell.
With position: fixed and will-change: transform (used for the hide/show
animation), iOS compositor layers can misplace the element. As a flex
child (position: relative; flex-shrink: 0) at the end of a height: 100dvh
container the nav is guaranteed to sit flush at the physical screen bottom.

Remove padding-bottom clearance from .app-content, .tasks-page and
.dashboard - no longer needed since the nav no longer overlaps the
content area.
This commit is contained in:
Ulas
2026-04-16 09:59:16 +02:00
parent 62bb3546a8
commit 51f211d72a
5 changed files with 15 additions and 8 deletions
+7 -5
View File
@@ -96,7 +96,6 @@
.app-content {
flex: 1;
min-height: 0;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
@@ -114,10 +113,13 @@
* Leichter Blur-Effekt für Glassmorphismus.
* -------------------------------------------------------- */
.nav-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Flex-Kind von .app-shell statt position: fixed - zuverlässiger auf iOS PWA.
* position: fixed kann durch will-change: transform in iOS-Compositor-Layern
* falsch referenziert werden. Als Flex-Kind am Ende der 100dvh-App-Shell ist
* die Position garantiert am Viewport-Bottom. */
position: relative;
flex-shrink: 0;
width: 100%;
background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
border-top: 1px solid var(--color-border-subtle);
display: flex;