Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Renderer treats a sub-pixel width difference as a resize, which cancels the `motion()` entrance

Abierto Apto para principiantes
  • ¿Algo no está bien?
#182 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
1/5
Tiempo estimado
Menos de una hora
Aptitud para principiantes
85/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Localiza la función responsiveSizeChanged en el código del renderizador de gráficos, donde la comprobación de igualdad estricta next.width !== scene.width (y su equivalente de altura) marca incorrectamente las diferencias de subpíxeles como cambios de tamaño. Actualiza ambas comparaciones para ignorar diferencias inferiores a 0,5px, por ejemplo usando Math.abs(next.width - scene.width) >= 0.5. Prueba la corrección renderizando un Chart con renderer={motion()} en un contenedor con ancho de píxel fraccional para confirmar que la animación de entrada se completa en lugar de ser cancelada por un render de cambio de tamaño innecesario.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
769
Forks
47
Merge medio
6 h 9 min
PR fusionados (30 d)
20

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/charts

Todos los issues de TanStack/charts

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.