diff --git a/apps/user-app-v2/src/components/product/ProductMorph.vue b/apps/user-app-v2/src/components/product/ProductMorph.vue index 66a31b2..765c0eb 100644 --- a/apps/user-app-v2/src/components/product/ProductMorph.vue +++ b/apps/user-app-v2/src/components/product/ProductMorph.vue @@ -508,8 +508,8 @@ onBeforeUnmount(() => { } // The scroller for pages that do not scroll themselves (v1's SingleProduct -// grows with its content; v2's is its own 100vh scroller and never overflows -// this). The page's transform is applied HERE rather than on anything inside: +// grows with its content; v2's is its own 100dvh scroller and never overflows +// this — see the note on .pd there). The page's transform is applied HERE rather than on anything inside: // this box is already pinned to the viewport, so a `position: fixed` action bar // inside the page stays exactly where it is while the transform is running. .pm__sheet { diff --git a/apps/user-app-v2/src/components/product/SingleProduct.vue b/apps/user-app-v2/src/components/product/SingleProduct.vue index a49643f..21b93f2 100644 --- a/apps/user-app-v2/src/components/product/SingleProduct.vue +++ b/apps/user-app-v2/src/components/product/SingleProduct.vue @@ -538,9 +538,17 @@ onBeforeUnmount(() => { // container and pin itself to the viewport, sitting over the drawer. Scrolling // this element instead means the gallery is positioned against THIS box in // both cases, so the behaviour is identical however the detail view is opened. +// +// `dvh`, not `vh`: on a phone 100vh is the height with the browser's address +// bar collapsed. The bar is only collapsed once the page underneath has been +// scrolled to its end. Anywhere else it is showing, so a 100vh page is taller +// than the overlay holding it, and the sticky action bar at its bottom lands +// below the screen. 100dvh is the height actually on screen. vh stays as the +// fallback for browsers without dvh. .pd { position: relative; height: 100vh; + height: 100dvh; overflow-y: auto; overflow-x: hidden; background: @page; @@ -973,6 +981,7 @@ onBeforeUnmount(() => { // this box — so filling the remainder is exactly one screen, with no extra // scroll left over at the bottom. min-height: calc(100vh - 60px - 72px - env(safe-area-inset-top, 0px)); + min-height: calc(100dvh - 60px - 72px - env(safe-area-inset-top, 0px)); } .pd__grip {