Add plain-unit fallbacks for svmin/svh in case of unsupported engines
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:
Bendik Aagaard Lynghaug
2026-08-06 15:37:49 +02:00
parent a6dfa30f71
commit adaaf7f3e3
+12 -1
View File
@@ -54,7 +54,12 @@
-based units recalculate as mobile Safari's address bar
hides/shows on scroll, which would reflow every text size on the
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));
}
@@ -137,6 +142,12 @@ main.loading, main.not-found {
position: relative;
max-width: none;
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;
padding: 0;
justify-content: flex-end;