This has nothing to do with the circle. Rendering animations in Chromium really is just that expensive.
VS Code experienced this same issue with the cursor blinking animation and some loading animations - there the best fix after dozens of attempts and some of the best JS perf engineers in the world looking at it was to actually move back to JS to show/hide the cursor on timeout. The only real "fix" for CSS animated things is to set `steps(30)` or whatever other low value to decrease the refresh rate, but that will make the thing stutter. There's no way to have efficient 60fps animations in chromium.
This is a great example of basic functionality regressing due to the bloat of modern technology stacks.
Blinking cursors have existed since the original IBM PC and before. Yet for some reason, now a blinking cursor is a problem that causes CPU spikes on modern gigahertz level machines.
VS Code experienced this same issue with the cursor blinking animation and some loading animations - there the best fix after dozens of attempts and some of the best JS perf engineers in the world looking at it was to actually move back to JS to show/hide the cursor on timeout. The only real "fix" for CSS animated things is to set `steps(30)` or whatever other low value to decrease the refresh rate, but that will make the thing stutter. There's no way to have efficient 60fps animations in chromium.
https://github.com/microsoft/vscode/issues/138396
https://github.com/microsoft/vscode/issues/22900
If anyone does know a fix, you could save the developer community about a metric ton of battery life hours worldwide if you share it with the above :)