From a69a5c31e58ded59903cb5b8b7b35f6e78452dd3 Mon Sep 17 00:00:00 2001 From: thislight Date: Wed, 20 Nov 2024 00:16:44 +0800 Subject: [PATCH] StackedRouter: fix content height is 0 on webkit * for WebKit, fix the content height is 0 if the window width > 560px --- src/platform/StackedRouter.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/platform/StackedRouter.css b/src/platform/StackedRouter.css index eac26ce..a946a2d 100644 --- a/src/platform/StackedRouter.css +++ b/src/platform/StackedRouter.css @@ -15,6 +15,16 @@ dialog.StackedPage { width: 560px; max-height: 100vh; max-height: 100dvh; + /* + * WebKit does not see contain-instric-size as the real element size. + * If the container does not have height, the child element using 100% + * height (usually Scafflod in our case) was have 0px computed height. + * + * This behaviour is different from Firefox. So we need to actually + * define the box height here. (Rubicon) + */ + height: 100vh; + height: 100dvh; background: none; display: none; @@ -31,10 +41,9 @@ dialog.StackedPage { @media (max-width: 560px) { & { + margin: 0; width: 100vw; width: 100dvw; - height: 100vh; - height: 100dvh; contain-intrinsic-size: 100vw 100vh; contain-intrinsic-size: 100dvw 100dvh; }