css - Border-radius: 50% not producing perfect circles in Chrome

Question

Usually border-radius: 50% works fine for most applications, and Chrome produces what looks like a circle. But in this instance, I am trying to continually rotate a circle quickly, and this is where this problems shows itself.

Check out this codepen to see what I'm talking about. Notice how the outer edge wobbles?

http://codepen.io/jonshungry/pen/edmpf

Is this a bug with Chrome's border-radius? Or is this something with the transform?

Can anyone suggest a work around?

Answer 1

It's caused by the roundings in the way the "radius" is calculated. Since the size is an even number the border is "in-between" two pixels... long history, at the end:

Workarround: Set your divs circles size an "odd" number of pixels.

$ring-medium-outer: 437px;
$ring-medium-inner: 381px;