Fix loading-screen sizing shift from the Inter font swap
font-display: swap paints with the fallback font stack first, then swaps to Inter once the 876KB variable font finishes downloading. .loader-wordmark was already width-fixed from an earlier centering fix, but .loader-tagline, .loader-message, and .progress-percent had no explicit width and (more importantly) used line-height: normal, which is derived from each font's own metrics - Inter and the fallback stack disagree by 3-4px per line. Those three deltas summed exactly to the .loader column's total 10px height change, which is what visibly shifted the whole centered loading screen once the swap happened. Gave the width-dependent elements width: 100% (matching the wordmark) and gave all three text elements an explicit unitless line-height (computed from font-size, not font metrics) so their box size no longer depends on which font is currently active. Verified empirically: forced the fallback font stack on the live page and diffed getBoundingClientRect() against Inter for every loader element - all width/height deltas are 0 after the fix (previously up to 17.5px width / 10px cascaded height).
This commit is contained in:
@@ -209,7 +209,9 @@
|
||||
font-size: clamp(20px, 2.3vw, 28px);
|
||||
font-weight: 430;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.3;
|
||||
margin: 17px 0 clamp(36px, 6vh, 54px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
@@ -241,6 +243,7 @@
|
||||
font-size: 22px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 650;
|
||||
line-height: 1.3;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
@@ -248,8 +251,10 @@
|
||||
color: var(--muted);
|
||||
font-size: 19px;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.3;
|
||||
margin: 24px 0 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#status-notice {
|
||||
|
||||
Reference in New Issue
Block a user