当我注意到 Google Chrome (20) 中存在一些严重的条带问题时，我正在使用 svg 文件来生成平滑渐变。更奇怪的是，当我将 chrome 移到我的电影显示器上时，条纹明显减少，这使得这更加奇怪。下面是当网站跨越我的mbp的本机屏幕（左）和电影院显示（右）时拍摄的单个屏幕截图（根本没有photoshop）。
如您所见，左侧的条带更加严重。更奇怪的是，在 safari FF 或 ie9 中仍然存在接近于零的条带。下面是同样的情况，但在 FF
我有一种感觉，这可能是驱动程序问题或类似问题。但我真的很想知道。这到底是怎么回事？为什么它会在屏幕之间显示如此不同？跨两个显示器的单个屏幕抓取怎么可能产生这样的变化？
我也刚刚注意到 FF 窗口的 POSITION 改变了渲染。当超过一半的窗口在本机显示器上时，电影院一侧会出现条带，但本机一侧没有。当窗口移动到一半以上在电影院显示时，条带显示在电影院一侧消失并出现在原始一侧。safari 也是如此，但是 chrome 没有这种行为，条带在原生端总是更明显，而在影院端则不太明显。
这真的让我很奇怪。这到底是怎么回事？
您正在rgb(85,85,85)渐变的中心和rgb(28,28,28)角落之间转换。一个 24 位 RGB 色彩空间（8 位 RGB 空间）只有 58 种独特的灰度颜色可在该区域显示。
在顶部图像上，从渐变角到中心的距离约为 520 像素。如果间隔均匀，这意味着相同的颜色必须连续显示至少 9 个像素。大多数人可以很容易地感知到各个 8 位灰度之间的差异，尤其是在颜色范围的中间。
正如@Duopixel 正确指出的那样，您的渐变之一是抖动的，有助于软化这些颜色之间的过渡。有趣的是，在您的双显示器测试中，有些频段是抖动的，有些则不是。这可能是因为硬件加速仅应用于一台显示器而不是另一台显示器。
像10 位或 12 位灰度监视器这样的故障是您将获得的最佳结果。使用您的显示器和这种设计，在技术上不可能获得更好的结果。
如果您想让当前的 24 位彩色显示器不那么明显，您可以：
更改您的设计以在渐变中引入微妙的颜色变化（例如从深蓝色到灰绿色）。这导致不同的 RGB 通道位可以在不同的时间转换，将您的波段分解成更小的差异化颜色。
更改您的设计以增加您的动态范围（例如从纯白色到纯黑色），以便您可以使用更多的彩条。
更改您的设计以减少渐变发生的总距离，从而减少带的宽度。
…或以上的某种组合。
我不确定切换显示器时发生了什么。
在 Firefox 中减少条带的原因是因为dithering，像素溢出到下一个颜色，随机化。有点像在带状渐变上添加模糊。
也许这种放大会让它更清楚：
左边是 Firefox，右边是 Webkit。似乎 Firefox 支持抖动渐变，而 Webkit 不支持。恐怕您对此无能为力。