Question

我正在做一个网站，我决定使用渐变而不是图像，但我在谷歌浏览器中遇到了这个问题（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/

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

UPD。 1：我使用的是Mac OS 10.8.4。在Safari中，这段代码完全正常。

UPD。 2：在Opera 17.0.1241.18中面临同样的问题。

Answer 1

这可能是由于像素行走/反转问题造成的。其原因可能是由于LCD屏幕上的电压不正确。我不太了解它，但有一些非常好的测试，看你的显示器是否有它：

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

Answer 2

转到菜单并取消标记此选项：设置 - ＆gt;显示高级选项 - ＆gt;在可用时使用硬件加速。

如果问题停止发生，可能会有以下几点：

你的视频卡坏了。
您有视频卡驱动程序错误。
您的操作系统的Chrome版本存在错误。

1，可以通过在另一台机器上测试排除。可以通过升级和/或降级驱动程序来排除2。可以通过升级或降级您的chrome版本来排除3。

根据我的经验1.并不像你想象的那样不合理。

Google Chrome径向渐变闪烁

2 个答案: