Description
Firefox DevTools console shows recurring CSS parser warnings when viewing pages with charts:
Error in parsing value for 'font-size'. Declaration dropped.
Error in parsing value for 'letter-spacing'. Declaration dropped.
The 1:1 line/column in the warning points to an inline style rather than a bundled stylesheet, consistent with a dynamically-set style value rather than static CSS.
Suspected cause
Not yet root-caused, but the only files in the codebase referencing fontSize/letterSpacing are chart components — almost certainly Recharts axis-tick styling (e.g. tick={{ fontSize: ... }}) rendering as inline SVG/CSS attributes, which Firefox's CSS parser is stricter about than Chromium-based browsers:
frontend/src/components/stats/TrafficVolumeChart.tsxfrontend/src/components/stats/TopHostsChart.tsxfrontend/src/components/crowdsec/TopAttackingIPsChart.tsxfrontend/src/components/crowdsec/BanTimelineChart.tsx
Scope
Confirmed unrelated to the "What's New" changelog feature (#1196) — neither WhatsNewModal.tsx nor AppearanceSettings.tsx reference these style properties. Surfaced incidentally during manual testing of that feature; pre-existing on development.
Impact
Cosmetic/console-only in current testing — Firefox drops the invalid declaration but the chart still renders. No confirmed visual regression yet; worth a quick look to confirm severity.
Repro
Open DevTools console in Firefox, navigate to a page rendering one of the charts above (Dashboard, CrowdSec pages).
Description
Firefox DevTools console shows recurring CSS parser warnings when viewing pages with charts:
The
1:1line/column in the warning points to an inline style rather than a bundled stylesheet, consistent with a dynamically-set style value rather than static CSS.Suspected cause
Not yet root-caused, but the only files in the codebase referencing
fontSize/letterSpacingare chart components — almost certainly Recharts axis-tick styling (e.g.tick={{ fontSize: ... }}) rendering as inline SVG/CSS attributes, which Firefox's CSS parser is stricter about than Chromium-based browsers:frontend/src/components/stats/TrafficVolumeChart.tsxfrontend/src/components/stats/TopHostsChart.tsxfrontend/src/components/crowdsec/TopAttackingIPsChart.tsxfrontend/src/components/crowdsec/BanTimelineChart.tsxScope
Confirmed unrelated to the "What's New" changelog feature (#1196) — neither
WhatsNewModal.tsxnorAppearanceSettings.tsxreference these style properties. Surfaced incidentally during manual testing of that feature; pre-existing ondevelopment.Impact
Cosmetic/console-only in current testing — Firefox drops the invalid declaration but the chart still renders. No confirmed visual regression yet; worth a quick look to confirm severity.
Repro
Open DevTools console in Firefox, navigate to a page rendering one of the charts above (Dashboard, CrowdSec pages).