angular / angular/components

Progress spinner shakes when specifying a diameter.

Ouverte
#11,756 25 commentaires 28 réactions 0 personnes assignées Voir sur GitHub
animation area: material/progress-spinner material spec P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### 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)

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et examinez l’implémentation de progress-spinner, en vous concentrant sur l’animation spécifique au diamètre après le déclenchement du libellé de l’input. Confirmez le tremblement dans la configuration concernée et vérifiez qu’un spinner de 16–32px reste fluide après que l’input a reçu puis perdu le focus.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.