google-chrome - Windows 7 上 Chrome 中径向渐变的像素化渲染

Question

作为参考，请参阅这个问题：Chrome 径向 css 渐变平滑度。

OP 在渐变的平滑度方面遇到了问题，但从讨论看来，这似乎只是在使用 alpha 透明度时。

---

这是我正在使用的渐变：

div {
    background: radial-gradient(
        #000 30%,
        transparent 30%, transparent 40%,
        #000 40%, #000 60%,
        transparent 60%
    );
}

如您所见，它使用硬停止（所以没有颜色过渡）和没有rgba（所以也没有 alpha）。尽管如此，在 Chrome 中（在 Windows 7 上进行了 23 次测试），它仍呈现出极度像素化：

这只是 Chrome 处理这些事情的方式，还是我错过了什么？有什么办法可以使它平滑一点（显然，不使用图像）？

这是小提琴：http: //jsfiddle.net/wARGc/

---

更新： 我为此提交了一个错误报告。

Answer 1

这是 Chrome 的渲染问题，您可以通过稍微调整形状来自己创建平滑。查看我对您的小提琴的更新

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;
}