谷歌浏览器径向渐变闪烁答案

【问题标题】：Google Chrome radial gradient blinking谷歌浏览器径向渐变闪烁
【发布时间】：2015-02-12 03:43:42
【问题描述】：

我正在做一个网站，我决定使用渐变而不是图像，但我在 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/

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

UPD。 1： 我使用的是 Mac OS 10.8.4。在 Safari 中，这段代码运行良好。

UPD。 2： 在 Opera 17.0.1241.18 中遇到同样的问题。

【问题讨论】：

我使用的是相同版本的 Chrome，在您提供的示例中我没有看到闪烁。
这台 Mac 相关吗？提供更多信息。
问题已更新。是的，我使用的是 Mac OS。
我的伙伴使用mac来设计和测试我们开发的网站。他经常在具有 css3 效果的元素中看到此类问题。我不知道如何解决它们，实际上我并不在乎。尝试添加 -webkit-transform: translateZ(0);强制gpu加速。
这里没问题：29.0.1547.66/Windows。应该在crbug.com上报告

标签： html css google-chrome

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

如果问题停止发生，可能有几件事：

你的显卡坏了。
你有一个显卡驱动错误。
您的操作系统的 chrome 版本存在错误。

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

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

【讨论】：