Clarity: Indeterminate Progress Bars not animated on Firefox

[patriceo]

Description:

The indeterminate progress bars are not animated on Firefox

After having the issue on my project, I came to the conclusion this is a Clarity issue because It can be reproduced from the clarity documentation page. Note the indeterminate progress bar works on Chrome & Safari.

URL:
https://clarity.design/documentation/progress

Firefox 78.0.1 (latest version) behaviour: Progress bar remains at 100% with no animation

[jmls]

odd. I just tried it with FF and works just fine

78.01 on ubuntu

[patriceo]

Have you tried the one in Indeterminate (Looping) Progress Bars section ? The one from your screenshot also works on my firefox (macOs) but if I scroll down to the looping example it does not.

[jmls]

and you are right. no animation ;)

[Jinnie]

I reproduced and researched it.
The animation is there, but the background color in FF is for some reason the same blue color as the animation block color. It is defined as #e8e8e8, and this setting is active, but something, maybe on the ::after block, overrides it and we have a blue block on blue background.

[mathisscott]

@Jinnie
Firefox had bugs with its browser related to progress bars when we created them in 2016. I would wager that Firefox has fixed those issues and now we can probably remove those browser-related overrides.