StackedRouter: fix content height is 0 on webkit

* for WebKit, fix the content height is 0 if the
  window width > 560px
This commit is contained in:
thislight 2024-11-20 00:16:44 +08:00
parent 9e9a831785
commit a69a5c31e5
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E

View file

@ -15,6 +15,16 @@ dialog.StackedPage {
width: 560px; width: 560px;
max-height: 100vh; max-height: 100vh;
max-height: 100dvh; 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; background: none;
display: none; display: none;
@ -31,10 +41,9 @@ dialog.StackedPage {
@media (max-width: 560px) { @media (max-width: 560px) {
& { & {
margin: 0;
width: 100vw; width: 100vw;
width: 100dvw; width: 100dvw;
height: 100vh;
height: 100dvh;
contain-intrinsic-size: 100vw 100vh; contain-intrinsic-size: 100vw 100vh;
contain-intrinsic-size: 100dvw 100dvh; contain-intrinsic-size: 100dvw 100dvh;
} }