chrome中的SVG带区

Question

当我注意到Google Chrome (20)中一些严重的条带问题时，我正在使用svg文件来生成平滑的渐变。更奇怪的是，当我将铬合金移到我的影院显示屏上时，条带明显减少了，这使得这更加奇怪。下面是一个单独的屏幕抓取(根本没有photoshop )，当网站跨越我的mbp原生屏幕(左)和影院显示(右)。

如你所见，左边的条带要严重得多。更奇怪的是，在safari FF或ie9中几乎没有条带。下面是在FF中的相同情况

​

​

我有一种感觉，这可能是驱动程序的问题或类似的问题。但我真的想知道。这到底是怎么回事？为什么它在不同屏幕上的显示会如此不同？两个显示器的单个屏幕抓取怎么会产生这样的变化呢？

我还注意到FF窗口的位置改变了渲染效果。当超过一半的窗口在本机显示器上时，在影院侧有条带，但本机侧没有条带。当移动窗口时，超过一半的窗口显示在影院显示器上，带状显示在影院一侧消失，而在原生一侧出现。safari也是如此，然而chrome没有这种行为，在原生端的带状效果更明显，而在影院端则不那么明显。

这真的让我很奇怪。这到底是怎么回事？

Answer 1

我不确定切换显示器时发生了什么。

在火狐中条带减少的原因是因为diethering，像素溢出到下一个颜色，随机的。有点像在带状渐变之上添加一个模糊。

也许这个放大图会让它变得更清晰：

​

左边是Firefox，右边是Webkit。似乎Firefox支持抖动渐变，而Webkit不支持，恐怕你对此无能为力。

Answer 2

您正在渐变中心的rgb(85,85,85)和角落的rgb(28,28,28)之间进行转换。24位RGB颜色空间(8位RGB空间)在此区域中仅有58种唯一的灰度颜色可供显示。

在顶部图像上，从渐变的角落到中心的距离约为520像素。如果间隔均匀，这意味着必须连续显示至少9个像素的相同颜色。大多数人可以很容易地感知到不同的8位灰度之间的差异，特别是在颜色范围的中间。

正如@Duopixel正确指出的那样，你的一个渐变是抖动的，有助于柔化这些颜色之间的过渡。有趣的是，在双显示器测试中，有些频段抖动，有些则没有。这可能是因为硬件加速只在一个显示器上应用，而不是在另一个显示器上。

如果像10- or 12-bit grayscale monitor这样的东西失败了，这是你能得到的最好的结果。使用您的显示器和这种设计，在技术上不可能获得更好的结果。

如果您想在当前的24位彩色显示器上使其不那么明显，您可以：

• 更改您的设计以在渐变中引入细微的颜色变化(例如，从深蓝色到灰绿色)。这会导致不同的RGB通道位在不同的时间转换，从而将您的频带分解为更小的差异化颜色。
• 更改您的设计以增加动态范围(例如，从纯白色到纯黑色)，以便您有更多的颜色条可用。
• 更改您的设计以减少渐变发生的总距离，从而减少频带的宽度。

…或者以上内容的某种组合。