See attached gif STR: 1. Open the memory tool 2. Click "Take Snapshot" 3. Watch the progress spinner This is less apparent on Retina displays, but on traditional monitors it's very noticeable and distracting.

It's just /so/ excited for you!

This uses the same throbber as other tools, so other instances should Aldo be affected, like wrapping up a perftool recording. If this is a quick fix, let's do it, but will be tool wide. If this is the same throbbed from bootstrap, I know that too has the same issue on Firefox.

Yep, I also see it on the perf tool. Less noticeable since I'm usually staring at the graphs instead of the spinner. :)

This is a pure CSS throbber, the code is here: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/toolbars.inc.css#1049 Since it's pure CSS, this might be an issue with animations in general.

Ccing Patrick, might know more about the web animations side of this

What's really strange is that removing and readding the animation tends to make it more stable. Testcase here: http://jsfiddle.net/ntim/Ltaa7e26/

In chrome, the throbber isn't affected by the issue, so it's likely something on Firefox's side.

Does the problem disappear if you either replace "none" with "rotate(0deg)" or add a "will-change: transform" to the thing being animated? I wouldn't be surprised if the continuous transitions to/from "transform:none" mean this can't get animated on the compositor right now, since those transitions have to mess with frame bits at least...

I haven't been able to reproduce it locally, but here's a patch that forces the saving state to stay on for easier testing

Updated link to CSS: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/toolbars.css#1049

Please attach testcases rather than posting jsFiddle links!

So I think the problem you're talking about in comment 0 is the problem that the circle isn't quite staying centered, i.e., that it wobbles a bit. (If you're instead talking about animation smoothness, then you should say so. But is that what comment 6 is about?) I don't actually see the issue locally the way attachment 8681337 [details] shows, so it's hard to tell. Does it improve if you give .throbber::before a font-size that is an integral number of pixels? Or perhaps a position that's an integral number of pixels offset from the edge of the body? Or perhaps even one that's an even number of pixels? It seems what attachment 8681337 [details] is showing could be caused by trying to rotate a circle about a point that isn't its exact center. It seems like the layout code could be improved if that's the case, but I'm trying to check that I'm correctly understanding the issue you're reporting.

(In reply to David Baron [:dbaron] ⌚UTC-8 from comment #13) > So I think the problem you're talking about in comment 0 is the problem that > the circle isn't quite staying centered, i.e., that it wobbles a bit. This is correct. The spinner does not remain centered during its animation.