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
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user