angular / angular/components

Progress spinner shakes when specifying a diameter.

Abierto
#11,756 25 comentarios 28 reacciones 0 asignados Ver en GitHub
animation area: material/progress-spinner material spec P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Bug:

When specifying a diameter (16-32px) on the progress spinner the animation will eventually start to shake by a couple pixels as it animates. Using smaller diameters make it more noticeable. Using other components with animations (material inputs, etc.) makes it worse.

#### What is the expected behavior?

Progress spinner has a smooth animation that doesn't shake as it animates.

#### What is the current behavior?

Over time, the progress spinner will begin to shake up and down as it animates.

#### What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-xg5xgq

1) Load the stackblitz demo
3) Click on the input (trigger the label animation)
4) Click away from the input (return it to normal)
5) Watch for the progress spinner to shake.
6) The progress spinner animation will never recover.

#### What is the use-case or motivation for changing an existing behavior?

The issue appears worse the more material components are on the page. Currently, progress spinner is unusable in our app because the shaking is distracting and unpleasant.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.0.3
Material: 6.2.0
Chrome: Version 67.0.3396.79 (Official Build) (64-bit)

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz e inspecciona la implementación de progress-spinner, centrándote en la animación específica del diámetro después de que se active la etiqueta de entrada. Confirma el shake en la configuración afectada y verifica que un spinner de 16–32px siga funcionando con fluidez después de que el campo de entrada reciba y pierda el foco.

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

Evaluación

Stack tecnológico
angular, 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
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.