fix(pwa): fix remaining iOS scroll bleed and safe-area height overflow (#16)
Root cause 1 (scroll bleed): padding-top was applied to body in standalone mode. Since .app-shell has height: 100dvh, body-padding shifted the shell beyond the viewport bottom - enabling body-level scrolling. Fix: moved padding-top from body to .app-shell in the standalone media query. Root cause 2 (content overflow): fixed-height page containers (Calendar, Shopping, Meals, Notes, Budget, Contacts) calculated height as 100dvh - nav-bottom - safe-area-inset-bottom, but never subtracted the top safe area. This caused each page to overflow .app-content by exactly env(safe-area-inset-top) pixels in standalone mode. Fix: added --safe-area-inset-top token and subtracted it in all 6 height calculations. Service worker cache bumped to v27/v26.
This commit is contained in:
@@ -16,9 +16,11 @@ html, body {
|
||||
}
|
||||
|
||||
/* ── 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. */
|
||||
* Nur horizontale Safe Areas auf body. Vertikale Safe Areas werden über
|
||||
* .app-shell (padding-top im Standalone-Modus) und die Seiten-/Nav-Berechnungen
|
||||
* (padding-bottom via --safe-area-inset-bottom) gehandhabt.
|
||||
* KEIN body padding-top/bottom - das würde .app-shell (height: 100dvh)
|
||||
* um den Safe-Area-Betrag aus dem Viewport schieben und Scroll-Bleed erzeugen. */
|
||||
body {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
@@ -59,7 +61,10 @@ nav,
|
||||
|
||||
/* ── Standalone-Modus: Status-Bar-Bereich berücksichtigen ── */
|
||||
@media (display-mode: standalone) {
|
||||
body {
|
||||
/* padding-top auf .app-shell (nicht body): So bleibt app-shell exakt 100dvh
|
||||
* hoch und überläuft den Viewport nicht - body-padding hätte .app-shell
|
||||
* nach unten verschoben und Scroll-Bleed verursacht. */
|
||||
.app-shell {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user