fix(ui): draw board tile glyphs on Chrome < 105 (container-query-unit fallback)
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 1m5s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m51s

The board sizes its tile letter/value glyphs (and the blank/bonus marks) in container-
query units (cqw), which are Chrome 105+. On an older engine — e.g. the Chrome 74
Android 10 System WebView — the cqw declaration is invalid and dropped, so the glyph
inherits the .cell `font-size: 0` reset and renders at 0px: the board tiles show empty
while the rack and stats tiles (not under that reset) render fine.

Add a viewport-relative fallback before each cqw font-size — calc(<n>vmin * var(--z, 1))
— which approximates the board-relative size and tracks the zoom (--z), so old WebViews
draw the glyphs; Chrome 105+ still takes the exact cqw line after it. Additive only, no
change on modern engines (verified: mock e2e incl. the board/zoom specs still green).

The landscape board-container sizing (.scaler.land min(100cqw,100cqh)) still relies on
container-query units and is not covered here — portrait (the mobile default under test)
is unaffected by that.
This commit is contained in:
Ilia Denisov
2026-07-04 18:43:52 +02:00
parent de2f1432be
commit c353c036ba
+11
View File
@@ -479,6 +479,11 @@
position: absolute;
top: 5%;
left: 8%;
/* Chrome < 105 has no container-query units: a dropped `cqw` would inherit the .cell
`font-size: 0` and the glyph would vanish. Fall back to a viewport-relative size that tracks
the board (≈ the viewport-fitted query container) and the zoom (--z), so old Android System
WebViews still draw the tile glyphs. Chrome 105+ takes the exact `cqw` line below. */
font-size: calc(4.2vmin * var(--z, 1));
font-size: 4.2cqw;
font-weight: 700;
line-height: 1;
@@ -487,12 +492,14 @@
position: absolute;
right: 5%;
bottom: 3%;
font-size: calc(2.4vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
font-size: 2.4cqw;
font-weight: 600;
}
/* A placed Erudit blank ("звёздочка") shows its star where the (absent) point value sits,
its ink centred on the same line as a neighbouring tile's value digit. */
.blankmark {
font-size: calc(2.8vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
font-size: 2.8cqw;
bottom: 0;
}
@@ -501,6 +508,7 @@
inset: 0;
display: grid;
place-items: center;
font-size: calc(3.6vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
font-size: 3.6cqw;
opacity: 0.7;
}
@@ -509,6 +517,7 @@
inset: 0;
display: grid;
place-items: center;
font-size: calc(2.7vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
font-size: 2.7cqw;
font-weight: 600;
opacity: 0.9;
@@ -526,10 +535,12 @@
padding: 0 1px;
}
.bt {
font-size: calc(1.7vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
font-size: 1.7cqw;
font-weight: 600;
}
.bb {
font-size: calc(1.9vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
font-size: 1.9cqw;
font-weight: 700;
white-space: nowrap;