angular / angular/components

Progress spinner shakes when specifying a diameter.

Aperta
#11,756 25 commenti 28 reazioni 0 assegnatari Vedi su GitHub
animation area: material/progress-spinner material spec P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla riproduzione StackBlitz collegata e ispeziona l’implementazione di progress-spinner, concentrandoti sull’animazione specifica per il diametro dopo l’attivazione dell’etichetta dell’input. Conferma lo shake nella configurazione interessata e verifica che uno spinner da 16–32px rimanga fluido dopo che l’input ha ricevuto e perso il focus.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.