fix(charts): measure axis labels at the size they are drawn under reduced motion

The reduced-motion backstop gives every element a near-zero transition,
and the default transition property is all, so the font size Recharts
writes into its measurement span started a transition and the read in
the same task returned the previous size. Labels were sized at whatever
the last one had, or at the inherited 16 px: the last date label moved
in from the edge and value labels that fit were dropped as colliding,
differently from one visit to the next. Nothing in the measurement host
is ever seen, so nothing in it transitions now. A browser test pins the
read under reduced motion and without it.
This commit is contained in:
Marc-André Bombeck committed 2026-10-23 17:21:06 +02:00
1 parent 551fbbbdec
commit 8a11b7bfc6
2 files changed
+99

No files matched your search

+14
View File
@@ -60,6 +60,20 @@ body,
--font-sans: "Inter", "Inter Fallback";
}
/*
* Recharts writes a label's font size into the measurement span and reads its
* box in the same task. The reduced-motion backstop below gives every element
* a near-zero transition, and the default transition property is `all`, so
* that write started a transition and the read returned the previous size: a
* label was sized at whatever the last one had, and the axes placed their
* labels differently from visit to visit. Nothing in the host is ever seen,
* so nothing in it transitions.
*/
[data-slot="chart-text-measurement-host"],
[data-slot="chart-text-measurement-host"] * {
transition: none !important;
}
@custom-variant dark (&:is(.dark *));
/*