Loading bar started to flicker in newest Chrome Version

[larrydahooster]

Lately I figured out that the loading bar in our app started acting really strange in Chrome Browser on Mac (Version 69.0.3497.100 (Official Build) (64-bit)).

I checked the demo of the repo and could see the same jump effect in Chrome

Whereas Safari in comparison runs smooth

Due to the frame-rate of the gifs you don't see a smooth transition in both gif

[redheadedstep]

I looked through the source code and the Chrome bug seems to be caused by the ANIMATION_DURATION. I played around with it a bit and was able to get Chrome to show a smooth animation by making this change:

// old code
var ANIMATION_DURATION = exports.ANIMATION_DURATION = UPDATE_TIME * 4;

// new code
var ANIMATION_DURATION = exports.ANIMATION_DURATION = UPDATE_TIME;

By syncing the ANIMATION_DURATION with the UPDATE_TIME, Chrome no longer had the stutter and produced a smooth transition.

I submitted a new pull request for the update.

[larrydahooster]

Thanks for your research. What I don't understand is why changing a constant value has an effect on transition?

[mironov]

@larrydahooster thank you for opening the issue. Please give a try to the v4.1.0. It ships with another type of CSS animation and should work better.

[larrydahooster]

@mironov Cool thanks. Fixed it for me.