SpinKit icon indicating copy to clipboard operation
SpinKit copied to clipboard

Published 20 hours ago • verified publisher icon tobiasahlin

Flashing artifact when reducing the circle spinner size

Open udeleng opened this issue 8 years ago • 5 comments

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

udeleng avatar Aug 09 '17 23:08 udeleng

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

tobiasahlin avatar Oct 28 '19 10:10 tobiasahlin

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

Here a gif from his jsfiddle: test

davidspiess avatar Oct 29 '19 10:10 davidspiess

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?

tobiasahlin avatar Oct 29 '19 13:10 tobiasahlin

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.

davidspiess avatar Oct 29 '19 15:10 davidspiess

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

tobiasahlin avatar Oct 30 '19 10:10 tobiasahlin