color.cloudflare.design - HTML5 progressbar does not dynamically change

[reinhart1010]

URL: https://color.cloudflare.design/

Browser / Version: Firefox 71.0
Operating System: Ubuntu
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: HTML5 progressbar does not dynamically change
Steps to Reproduce:

1. Visit the site
2. Observe the changes (approximately 3 seconds) on the dynamically-changing form elements (progress)

The <progress> color in Firefox remains unchanged.

Not reproducible in Chrome 79.0.3945.79.

Browser Configuration

• None

From webcompat.com with ❤️

[ksy36]

The site is using -webkit-progress-value which is not supported in Firefox:

                }, Object(d.d)(u, {
                    color: v.color,
                    border: "1px solid currentColor",
                    css: Object(_.a)({
                        "&[value]::-webkit-progress-bar": {
                            backgroundColor: "transparent"
                        },
                        "&[value]::-webkit-progress-value": {
                            backgroundColor: v.color
                        }
                    }, "")
                })

so adding the following will color the bar in Firefox

   "&[value]::-moz-progress-bar": {
        backgroundColor: v.color
     }

There is an existing bug for that https://bugzilla.mozilla.org/show_bug.cgi?id=1455565 , but we perhaps can contact the site since it's an easy fix

[softvision-oana-arbuzov]

The issue has been fixed. The progress color changes now.

Tested with:
Browser / Version: Firefox Nightly 81.0a1 (2020-08-06)
Operating System: Windows 10 Pro