[Spinner] Flickering on Chrome 63/64 Linux

[pitops]

Bug, feature request, or proposal:

Progress spinner animation fix

What is the expected behavior?

To not flicker but instead have constant and balanced animation

What are the steps to reproduce?

Just go to the material.angular.io section of the progress spinner and observe the spinner. It flickers. Tested on Chrome 63 and Firefox 57. Note that it can happen at random intervals and not constantly.

It is best observed when you open a new tab -> material.angular.io -> progress spinner

[donroyco]

I can't reproduce this behaviour on Mac OS X (High Sierra). What is your setup?

Chrome 62.

Chrome 63

[pitops]

@donroyco under further investigation, it seems to happen on linux machines (only checked a Virtual windows machine and it works fine). However getting deeper, firefox 45 ESR displays the spinner just fine but chrome 62/63 on multiple linux machines does not. Neither Firefox 57.

Linux machines include Ubuntu and Debian

UPDATE:

Found how to fix it but its not a real solution. If you disable hardware acceleration setting in Chrome the animation becomes smooth again.

I am hoping that there is a workaround on this as we can't just disable the hardware acceleration so that the spinner works..

[eTallang]

I'm not sure if it's the exact same issue, but I experience flickering with the progress spinner as well. It can happen in the material.angular.io example as well, but I was not able to record it, since it only happens occasionally, without any apparent pattern.

This is recorded from my own application. If you pause the gif on the flicker, it is apparent that the circle changes to a oval shape for 1 frame:

EDIT: I'm on Chrome 63.0.3239.108, Windows 10.

[pitops]

@eTallang this is exactly what happens in our case. Thanks for providing an animation of it.

👍

I've seen this flickering for months now, only decided to look for a solution today.
It doesnt always happen and usually goes away after seeing it a few times in the same session.
Chrome 63 on macos 10.13.2.

[Lakston]

Here is another gif example, I'm guessing it just happens when data is loaded in the background as suggested in the other issue

We've also experienced the 'ellipse' bug shown in @eTallang 's post on our app.

[pitops]

@michaelthe Your solution is simple and elegant - works great!