radius: 50% not producing perfect circles in Chrome
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?
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;
上一篇: C编程语言示例关于数组