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:
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [0.14.3] - 2026-04-06
|
||||
|
||||
### Fixed
|
||||
- PWA iOS: scroll bleed fully resolved - `padding-top: env(safe-area-inset-top)` moved from `body` to `.app-shell`; body-padding was pushing `.app-shell` (height: 100dvh) beyond the viewport bottom, allowing the page body itself to scroll (#16)
|
||||
- PWA iOS: all fixed-height page containers (Calendar, Shopping, Meals, Notes, Budget, Contacts) now subtract `--safe-area-inset-top` from their height calculation so they no longer overflow `.app-content` in standalone mode (#16)
|
||||
- Added `--safe-area-inset-top` CSS token (mirrors `env(safe-area-inset-top, 0px)`) for consistent use across all page layout calculations (#16)
|
||||
- Service worker cache bumped to v27/v26 to ensure CSS changes are picked up on next update (#16)
|
||||
|
||||
## [0.14.2] - 2026-04-06
|
||||
|
||||
### Fixed
|
||||
|
||||
Reference in New Issue
Block a user