"Too many font-size declarations corrupt UI text rendering"
Text in a panel renders as solid filled rounded-rectangle blocks — box-shaped placeholders that match each string's measured width (layout is correct), but the actual glyph fill is wrong. Every styled text element in the panel is affected. The issue appears in editor screenshots and in-game.
Root-caused by exhaustive bisection on a ~290-line panel SCSS: the trigger is specifically having many selectors carry an explicit font-size declaration (a handful is fine; ~13 across one panel broke every styled element). The problem is made worse by simultaneously having letter-spacing anywhere in the same file.
Ruled out as causes: font-family, color, font-weight, text-transform, individual font-size values, :hover pseudo-rules, render timing (18 s wait, full editor process restart).
The only confirmed-working configuration for a complex panel: neither font-size nor letter-spacing declared anywhere, with visual hierarchy carried entirely by:
font-weight(bold/normal)text-transform(uppercase)color
If a panel truly needs per-element font sizing:
- Add
font-sizeto one selector. - Screenshot-verify it renders correctly.
- Add the next
font-sizedeclaration. - Never batch many
font-sizedeclarations into one stylesheet at once.
This appears to be an engine-level SCSS/font-rendering interaction where a high count of font-size declarations in a single stylesheet overwhelms the glyph rendering pipeline. The layout engine still measures text correctly (widths match), but the actual glyph rasterization falls back to placeholder rectangles.