Progress spinner shakes when specifying a diameter.

[HeathJared]

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
2. Click on the input (trigger the label animation)
3. Click away from the input (return it to normal)
4. Watch for the progress spinner to shake.
5. 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)

[sahilbabbar]

I am unable to reproduce this issue on a consistent basis. Sometime it shakes and sometimes it looks fine.

[josephperrott]

@HeathJared I am unable to reproduce the issue that you outlined. Can you confirm if this is still occuring? Unfortunately we have slightly different version of chrome 67.0.3396.99 so I am not sure if maybe this is the difference.

[HeathJared]

Yes, I just double checked today using the provided Stackblitz link. It's easier to see if you zoom the page in.

I have reproduced it in Chrome Version 67.0.3396.99 (Official Build) (64-bit) and in the latest versions of electron.

It doesn't appear to be happening as frequently at the moment (and much less severe than it was), but here is a quick screen grab that shows it jittering up and down by a pixel or so.

I've seen it on at least 5 different machines and at it's worse it was described as constantly "vibrating". The GIF does not reflect it's worst, but only what I was able to quickly grab.

We have since removed the progress spinners until it's resolved.

[mscudlik]

same issue here

Edit:

• Windows 10
• Intel HD Graphics 520

[josephperrott]

@HeathJared I am still unable to reproduce this.

Are you seeing this in other browsers? Additionally, what OSes are you seeing this issue on? Additionally, if you know what GPUs are being used in your reproductions that could prove helpful as well.

[HeathJared]

I haven't tried any other browser at the moment.
All of the tests were on Windows 10.

I've seen the issue on the following GPUs:

• GTX 1080
• GTX 1060
• GTX 960M
• GTX 700 series
• Intel HD Graphics 4000
• Intel HD Graphics 530

[josephperrott]

@crisbeto Any chance you would be able to take a look in a Windows 10 environment?

[cisasteelersfan]

I have a page with multiple spinners that is shaking badly - Stackblitz: https://stackblitz.com/edit/angular-material2-issue-syytap

It still happens when the spinner is placed in a fixed size box.

• Windows 7
• Chrome Version 67.0.3396.99 (Official Build) (64-bit)
• Angular 6.1.1
• Angular Material 6.4.3
• Intel HD Graphics 520

[crisbeto]

I was able to reproduce it with the example from @cisasteelersfan, but trying out a few quick solutions didn't help (setting the transform-origin in all dimensions, using 3d transforms). Here's an example:

[nilsel]

Seeing the same "jittery" behaviour, Chrome 68.0.3440.106 on Mac OS 10.13.6. Macbook Pro 2016-model. We're using diameter 20 on the spinners.

However Safari manages to render it flawless, Firefox seems to have minor issues (way more smooth than Chrome, but still seems a bit off).

GPU info:
Radeon Pro 455 2048 MB
Intel HD Graphics 530 1536 MB

Edit: I tried turing GPU Rasterization off, and now it renders perfectly in Chrome;
chrome://flags/#enable-gpu-rasterization

[edgarfroes]

This issue persists to this date.