Chrome浏览器上的CSS3垂直线性渐变不平滑

Question

我想使用CSS3渐变来设置背景，但似乎Chrome在渲染此渐变时遇到问题，尤其是在仅仅几个像素上进行颜色过渡时。两种颜色之间没有平滑过渡。当渐变是水平方向时，它按预期工作。

这是代码：

.gradient {
background: #666 url("gradient-bg.svg");
/* Recent browsers */
background-image: -webkit-gradient(
    linear,
    left top, right top,
    from(#666),
    to(#666),
    color-stop(0.02, #eff2c5),
    color-stop(0.98, #eff2c5)
    );
background-image: -webkit-linear-gradient(
    left,
    #666,
    #eff2c5 2%,
    #eff2c5 98%,
    #666
    );
background-image: -moz-linear-gradient(
    left,
    #666,
    #eff2c5 2%,
    #eff2c5 98%,
    #666
    );
background-image: -o-linear-gradient(
    left,
    #666,
    #eff2c5 2%,
    #eff2c5 98%,
    #666
    );
background-image: linear-gradient(
    left,
    #666,
    #eff2c5 2%,
    #eff2c5 98%,
    #666
    );

}

可以在Fiddle

看到一个例子

对此有何想法/解决方法？