angular / angular/components

Progress spinner shakes when specifying a diameter.

Open
#11,756 25 comments 28 reactions 0 assignees View on GitHub
animation area: material/progress-spinner material spec P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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)

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the progress-spinner implementation, focusing on the diameter-specific animation after the input label is triggered. Confirm the shake in the affected setup and verify that a 16–32px spinner remains smooth after the input is focused and blurred.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.