react-component / react-component/progress

Line Component Rendering Incorrectly at Non-100% Zoom in Safari

Abierto
#301 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
TypeScript
Estrellas
706
Forks
161
Merge medio
3 h 29 min
PR fusionados (30 d)
2

Descripción

The Line component from rc-progress does not render correctly at non-100% zoom levels (mostly with less than 100%) in Safari.
Specifically:
When the browser zoom is set to 50%, the progress bar does not fill according to the percent value provided.
For example, if percent is 50%, the progress bar should be half-filled, but it shows random or incorrect filling.
This issue does not occur at 100% zoom.

Steps to Reproduce
Open Safari and set the browser zoom to 50%.
Use the Line component from rc-progress with a percent value (e.g., 50%).
Observe that the progress bar does not fill correctly according to the percent value.

Expected Behavior
The Line component should render the progress bar correctly at any zoom level, filling the bar according to the percent value provided.

Actual Behavior
At 50% zoom, the progress bar does not fill correctly. For example:
If percent is 50%, the progress bar may show random or incorrect filling.
If percent is 100%, the progress bar works correctly.

CodeSandbox Link

Relevant Screenshots:
For 100% zoom in safari:

Image

For 50% zoom in Safari:

Image

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

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.

Línea de trabajo

Comienza con el componente Line de rc-progress y reproduce el problema usando el CodeSandbox enlazado en Safari con un zoom del 50 % y del 100 %. Traza cómo el valor porcentual determina la representación del progreso en SVG y verifica después que los valores intermedios, como 50 %, se rellenen correctamente con un zoom distinto del 100 %, sin cambiar el comportamiento existente al 100 %.

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

Evaluación

Stack tecnológico
react, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.