Add plain-unit fallbacks for svmin/svh in case of unsupported engines
Deploy / deploy (push) Successful in 33s
Deploy / deploy (push) Successful in 33s
Couldn't reproduce the reported "hero-yes doesn't show" in a live WebKitGTK check (svmin/svh both resolved correctly there), but an engine that doesn't support these newer viewport units would treat the whole declaration as invalid and drop it - for .hero-yes's height that means falling through to auto, which collapses the section to its in-flow content height and clips the canvas via overflow:hidden. Declaring a plain px/vh value first means an unsupported engine keeps that instead of falling through further.
This commit is contained in:
+12
-1
@@ -54,7 +54,12 @@
|
|||||||
-based units recalculate as mobile Safari's address bar
|
-based units recalculate as mobile Safari's address bar
|
||||||
hides/shows on scroll, which would reflow every text size on the
|
hides/shows on scroll, which would reflow every text size on the
|
||||||
page mid-scroll; svmin stays fixed to the smallest viewport state,
|
page mid-scroll; svmin stays fixed to the smallest viewport state,
|
||||||
same stability .hero-yes already gets from 100svh below. */
|
same stability .hero-yes gets from 100svh below.
|
||||||
|
Plain-px fallback declared first: an engine that doesn't
|
||||||
|
understand svmin/calc() here treats the whole line as invalid and
|
||||||
|
ignores it, leaving this in effect instead of falling through to
|
||||||
|
the UA default. */
|
||||||
|
font-size: 17px;
|
||||||
font-size: max(12px, calc(2.1svmin + 3pt));
|
font-size: max(12px, calc(2.1svmin + 3pt));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -137,6 +142,12 @@ main.loading, main.not-found {
|
|||||||
position: relative;
|
position: relative;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
/* plain-vh fallback first - same reasoning as :root's font-size
|
||||||
|
above: an engine without svh support ignores the invalid second
|
||||||
|
line rather than falling through to auto height, which would
|
||||||
|
collapse this to the height of its in-flow content and clip the
|
||||||
|
canvas via overflow:hidden below. */
|
||||||
|
height: 100vh;
|
||||||
height: 100svh;
|
height: 100svh;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|||||||
Reference in New Issue
Block a user