Flashing artifact when reducing the circle spinner size

[udeleng]

I placed the source for the spinner circle animation into JsFiddle and I just modified the height and width. I tried 30px, 20px, and 16px, and I see a flashing artifact during the animation.

https://jsfiddle.net/udeleng/pqxv7xj9/

Browser: Chrome 60.0.3112.90 (Official Build) (64-bit)
OS: Windows 10 Pro

[tobiasahlin]

@udeleng I can't reproduce this on mac, can you make a screen grab? 🙏

[davidspiess]

I noticed this too.
Chrome 78.0.3904.70 (Official Build) (64-bit)
OS: Windows 10 Pro

Here a gif from his jsfiddle:

[tobiasahlin]

Thanks @davidspiess 🙏

This feels like a browser bug. I've no idea how we could work around it. Could you confirm if it flickers in all sizes, or is it only when it's below 40px or so?

[davidspiess]

It seems like a Chrome bug, Firefox and Edge don't have any rendering issues during my tests.
I tried different sizes too, smaller sizes seem to be more problematic than bigger sizes.
40px for example renders fine on my machine, 16px is by far the worst size with a lot of flashing artifacts.

[tobiasahlin]

Thanks @davidspiess 🙏 I'll keep this issue open and file a Chromium bug.

Update: Bug tracked here https://bugs.chromium.org/p/chromium/issues/detail?id=1020542&q=transition%20flicker&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified