Progress bars :indeterminate - no animation in Firefox

[AlexGnatko]

This is about Bulma.

It looks like a browser-related bug, because it behaves differently in Firefox and Chrome. Probabaly needs some CSS tweaking to address both engines.

Overview of the problem

Open this page:

https://bulma.io/documentation/elements/progress/

In Chrome and then in Firefox (on Windows) - you'll see that in Firefox the indeterminate progress bars are not animating, they're solid.

The bulma version is the one used on your docs site, also the progress bars don't work on my website that I'm building using some fresh version of bulma.

Description

See above.

Steps to Reproduce

Open this:

https://bulma.io/documentation/elements/progress/

in Chrome and in Firefox.

Look at the indeterminate progress bars and see the different behavior in Firefox and Chrome.

Expected behavior

Should look identical in Firefox and Chrome.

Actual behavior

OK in Chrome, rock-solid indeterminate progress bars in Firefox. Looks like you guys prefer webkit, I work more with Firefox.

[bodograumann]

I had the opposite problem. My own implementation of an animated indeterminate progress bar worked fine in firefox, but the animation was not possible in chrome and edge still showed its own version.

I tried animating the background-image of .progress:indeterminate::-moz-progress-bar, &::-webkit-progress-bar and &::-ms-fill. The issue in chrome seems to also be demonstrated here: https://jsfiddle.net/6gekeegg/.

So my guess is, in firefox .progress::-moz-progress-bar needs to be used and in chrome the main .progress element needs to be animated.

[luiscastro193]

Duplicated issue: #2258, there is a pull request in #2273