html - 谷歌浏览器径向渐变闪烁

Question

我正在做一个网站，我决定使用渐变而不是图像，但我在 Google Chrome(v. 29.0.1547.65)中遇到了这个问题。使用以下代码渐变闪烁。

HTML:

<div class="blueline-top"></div>

CSS:

.blueline-top {
    width: 100%;
    height: 60px;
    background: radial-gradient(50% 300px, circle, #157cda, #14426c);
    background: -webkit-radial-gradient(50% 300px, circle, #157cda, #14426c);
}

演示:http://jsfiddle.net/DaZzz/BCBG8/1/

如何解决这个问题？有人遇到过这个吗？

更新。 1:我使用的是 Mac OS 10.8.4。在 Safari 中，这段代码工作得很好。

更新。 2:在 Opera 17.0.1241.18 中面临同样的问题。

Answer 1

这可能是由于像素移动/反转问题造成的。其原因可能是 LCD 屏幕上的电压不正确。我对此了解不多，但是这里有一些非常好的测试可以查看您的显示器是否有它:

http://www.lagom.nl/lcd-test/inversion.php#invpattern