User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/20100101 Firefox/74.0

Steps to reproduce:

This affects FF v70+. When reverting to earlier versions of FF, the issue can't be reproduced. This issue is also specific to FF and not other browsers.

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/20100101 Firefox/74.0

Demo of bug:
https://codepen.io/ryanMackIllumio/pen/XWbaqRq

The issue becomes resolved if you remove border-radius on the progress bar. Setting overflow: hidden on the button, and removing the border-radius on the progress bar resolves the issue, but unfortunately isn't an option in our specific use case.

Also, if I navigate to about:config and set gfx.webrender.all to true, the animation behaves as expected. None of the other gfx flags resolves the issue.

Actual results:

The animation for the progress bar has rough, choppy edges.

See the attached screenshot for reference.

Expected results:

The edges of the progress bar should be smooth.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

regression range
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=717f127c6729b43ddc1f8b0ee22a3ce2abd57ae9&tochange=cbbae09aa554b578d5996ee8c2f4473d2991de35

-> bug 1491451

macos specific, and fixed by enabling webrender

Reproduced this on the toronto windows testing machine (GTX 950) with d3d11 compositing as well.