Ulas
2508473265
Three root causes fixed: 1. Double safe-area padding: pwa.css set padding-top/bottom on body globally, but page containers already account for safe-area-inset in their height calculations. Removed body vertical padding (kept only in standalone media query for padding-top). 2. Wrong nav token: all page containers used --nav-height-mobile (56px) instead of --nav-bottom-height (68px = 56px scroll + 12px dots), causing 12px of content to render behind the bottom nav. 3. Scroll bleed: fixed-height page containers lacked overflow:hidden, allowing scroll events to propagate to the body. Added overscroll-behavior-y:contain on app-content globally. Fixes #16
71 lines
2.0 KiB
CSS
71 lines
2.0 KiB
CSS
/**
|
|
* Modul: PWA Native Feel
|
|
* Zweck: Natives Touch- und Scrollverhalten, Safe Areas, Touch-Targets
|
|
* Abhängigkeiten: tokens.css, layout.css
|
|
*/
|
|
|
|
/* ── Kein Rubber-Banding / Pull-to-Refresh des Browsers ── */
|
|
html, body {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* ── Kein Tap-Highlight auf allen Elementen (Android Chrome) ──
|
|
* reset.css setzt es nur auf html; hier global für alle Elemente */
|
|
* {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ──
|
|
* Nur horizontale Safe Areas auf body - vertikale werden von
|
|
* Standalone-Modus (padding-top) und Nav/Seiten (padding-bottom) gehandhabt.
|
|
* Kein body padding-top/bottom hier, sonst doppelt mit Seiten-Berechnungen. */
|
|
body {
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
/* ── Bottom Nav über der Gesture Bar ──
|
|
* layout.css nutzt --safe-area-inset-bottom Token;
|
|
* hier als Fallback direkt via env() */
|
|
.nav-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* Touch-Targets werden über tokens.css (--target-sm/md/lg) und
|
|
* komponentenspezifische Styles gehandhabt - siehe Redesign Phase E.
|
|
* Keine globale min-size-Regel hier, da sie mit dem bestehenden
|
|
* Touch-Target-System kollidiert (::before-Expansion auf kleinen Elementen). */
|
|
|
|
/* ── Smooth Momentum-Scrolling in scrollbaren Containern ── */
|
|
.scroll-container,
|
|
.nav-bottom__scroll {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
/* ── Kein Text-Selection in UI-Elementen (nur in Content-Bereichen) ── */
|
|
nav,
|
|
.nav-bottom,
|
|
.nav-sidebar,
|
|
.cal-toolbar,
|
|
.tasks-toolbar,
|
|
.notes-toolbar,
|
|
.contacts-toolbar,
|
|
.modal-panel__header {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ── Standalone-Modus: Status-Bar-Bereich berücksichtigen ── */
|
|
@media (display-mode: standalone) {
|
|
body {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
/* Kein Scroll-Bleed - Content bleibt in seinem Container */
|
|
.app-content {
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
}
|