HTML5 progressbar does not dynamically change in Firefox

[reinhart1010]

Hello, I'd like to report an issue where the progress bar color does not dynamically change in Firefox due to missing CSS properties. It was first reported in webcompat/web-bugs#46522 in 2019, so kudos to @ksy36 and the rest of the Webcompat team.

The progressbar color seems to depend on ::-webkit-progress-value to determine its background color, which is OK in both WebKit (Safari) and Chromium-based (Chrome, Edge, Opera, etc.) browsers. However, Firefox does not support the property and instead uses its own ::-moz-progress-bar. And since the ::-moz-progress-bar property has not been set, Firefox renders the progress bar with the default blue color as shown on the screenshots below.

There's at least a discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1455565 to make ::-webkit-progress-value an alias of ::-moz-progress-bar, but the issue has not been followed up. You can change the code in FormBlock.js from:

          <Progress
            color={currentCombination.color}
            border="1px solid currentColor"
            css={{
              "&[value]::-webkit-progress-bar": {
                backgroundColor: "transparent"
              },
              "&[value]::-webkit-progress-value": {
                backgroundColor: currentCombination.color
              }
            }}
          />

to:

          <Progress
            color={currentCombination.color}
            border="1px solid currentColor"
            css={{
              "&[value]::-webkit-progress-bar": {
                backgroundColor: "transparent"
              },
              "&[value]::-webkit-progress-value": {
                backgroundColor: currentCombination.color
              },
              "&[value]::-moz-progress-bar": {
                backgroundColor: currentCombination.color
              }
            }}
          />