I am using a svg file to produce a smooth gradient, when I noticed some serious banding issues in Google Chrome (20). Even stranger when I moved the chrome onto my cinema display the banding noticeably reduced, which makes this even weirder. Below is a single screen grab (no photoshop at all) taken when the website spanning my mbp's native screen (left) and the cinema display (right).
As you can see the banding is much more severe on the left. Stranger still there is near zero banding in safari FF or ie9. Below is the same situation but in FF
我有一种感觉，这可能是驱动程序问题或类似问题。但我真的很想知道。这到底是怎么回事？为什么不同屏幕的显示效果会如此不同？两台显示器上的一次屏幕抓取怎么可能会产生这样的变化？
我还刚刚注意到 FF 窗口的位置改变了渲染。当超过一半的窗口在本机显示器上时，影院侧会出现条带，但本机侧不会出现。当窗口移动到一半以上显示在影院显示屏上时，条带显示会在影院端消失并出现在本机端。 Safari 也是如此，但是 chrome 没有这种行为，条带在本机端总是更明显，而在影院端则不太明显。
这真的让我很奇怪。这里到底发生了什么？
您正在之间过渡rgb(85,85,85)在渐变的中心rgb(28,28,28)在角落。 24 位 RGB 颜色空间（8 位 RGB 空间）只有 58 种独特的灰度颜色可在该区域中显示。
在顶部图像上，从渐变角到中心的距离约为 520 像素。如果均匀间隔，这意味着一行中至少 9 个像素必须显示相同的颜色。大多数人可以轻松感知各个 8 位灰色阴影之间的差异，尤其是在颜色范围的中间。
正如 @Duopixel 正确指出的那样，您的渐变之一会抖动，有助于柔化这些颜色之间的过渡。有趣的是，在双显示器测试中，有些频段会抖动，有些则不会。这可能是因为硬件加速仅应用于一台显示器而不是另一台显示器。
失败类似10 位或 12 位灰度监视器 http://www.nvidia.com/docs/IO/40049/Grayscale10bit_v03.pdf这是您将得到的最好结果。使用您的显示器和这种设计，从技术上讲不可能获得更好的结果。
如果您想让当前的 24 位彩色显示器变得不那么明显，您可以：
更改您的设计，在渐变中引入微妙的颜色变化（例如从深蓝色到灰绿色）。这会导致不同的 RGB 通道位可以在不同的时间转换，从而将您的色带分解为较小的差异化颜色。
更改您的设计以增加动态范围（例如从纯白色到纯黑色），以便您可以使用更多颜色条。
更改您的设计以减少渐变发生的总距离，从而减少带的宽度。
......或以上的某种组合。
