Renderer treats a sub-pixel width difference as a resize, which cancels the `motion()` entrance
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Newbie friendliness
- 85/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Locate the responsiveSizeChanged function in the chart renderer code, where the strict equality check next.width !== scene.width (and its height equivalent) incorrectly flags sub-pixel differences as resizes. Update both comparisons to ignore differences under 0.5px, e.g. using Math.abs(next.width - scene.width) >= 0.5. Test the fix by rendering a Chart with renderer={motion()} in a container with a fractional pixel width to confirm the entrance animation completes instead of being cancelled by an unnecessary resize render.
Written by the indexing model from the issue text.
Description
Version: @tanstack/charts 1.0.0 (unchanged on main).
The first render sizes the scene from getComputedStyle(container).width (contentBoxDimension → cssPixelValue). Chromium serializes that rounded, e.g. 569.594px. The ResizeObserver then reports the exact contentRect.width, 569.59375, and responsiveSizeChanged compares the two with !==:
next.width !== scene.width
So on any container with a fractional width (a 32% grid column, minmax(…)), the observer's first callback schedules a "resize" render. With motion()'s default resize: false, that render paints the final frame without animation, and the entrance is cancelled one frame after it starts. Containers that happen to be a whole number of pixels wide animate fine, so it looks random from the app side.
Repro: mount a Chart with renderer={motion()} inside <div style="width: 569.59375px">. data-ts-motion-state goes running, and the SVG is replaced on the first observer callback without ever reaching finished.
Suggested fix: treat a difference under half a pixel as no change (Math.abs(next.width - scene.width) >= 0.5, same for height), or take the first measurement from a source with the same precision as the observer. We're running the first as a pnpm patch, and it restores the entrance.
- Dominant language
- TypeScript
- Stars
- 769
- Forks
- 47
- Avg merge
- 6h 9m
- Merged PRs (30d)
- 20
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from TanStack/charts
-
brushX with `values` can shorten the selection range when it’s dragged to the plot edgePossibly taken @andersk claimed this 2 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 54/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 52/100
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
Similar issues
-
Mondriaan
Difficulty 1/5 Under an hour Newbie friendliness 88/100
knaw-huc/textannoviz#709 ·
Maintainers usually reply within 1 day
-
Add: YRF Music NepalOpenstreams:add
Difficulty 1/5 Under an hour Newbie friendliness 62/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
walletbeat/walletbeat#1558 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
hawk-digital-environments/HAWKI#438 ·
Maintainers usually reply within 1 day
-
good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
OktoLabsAI/okto-pulse#114 ·
Maintainers usually reply within 1 day