Pixelated rendering of radial gradient in Chrome on Windows 7 - google-chrome

Question

For reference, see this question: Chrome radial css gradient smoothness.
The OP is having trouble with the smoothness of the gradient, but from the discussion it seems that that's only when using alpha transparency.
Here's the gradient I'm using:
div {
background: radial-gradient(
#000 30%,
transparent 30%, transparent 40%,
#000 40%, #000 60%,
transparent 60%
);
}
As you can see, it's using hard stops (so no color transition) and no rgba (so no alpha either). Still, in Chrome (tested in 23 on Windows 7) it's rendered extremely pixelated:
Is this just the way Chrome handles these things, or am I missing something? Is there anything that can be done to smoothen it out a bit (short of using an image, obviously)?
Here's the fiddle: http://jsfiddle.net/wARGc/
Update: I filed a bug report for this.

Answer 1

It is a rendering problem by Chrome, you can create the smoothing yourself by adjusting the shape slightly. See my update to your fiddle
http://jsfiddle.net/jamestoone/XU7jB/
div {
width: 100px;
height: 100px;
background: radial-gradient(#000 30%, transparent 30%, transparent 40%, #000 40%, #000 60%, transparent 60%);
}
div.new {
background: radial-gradient(#000000 30%, transparent 32%, transparent 38%, #000000 40%, #000000 60%, transparent 62%) repeat scroll 0 0 transparent;
height: 100px;
width: 100px;
}

Answer 2

When building a reusable code that will take different sizes, playing with percentages is not an option because it can fit only a single size of the gradient container, and will distort a smaller or larger one.
Yet, I found that setting explicitly a distance of 1px for the gradient to be smooth between each gradient step, solves completely the problem.
So for each step, instead of setting twice the same percentage, like 40%, just give one of them a pixel more space: calc(40% - 1px).
Demo:
http://jsfiddle.net/zgmfe9v2/
Smooth radial gradient