铬中的 SVG 条带

Question

当我注意到 Google Chrome (20) 中存在一些严重的条带问题时，我正在使用 svg 文件来生成平滑的渐变。更奇怪的是，当我将镀铬物移到我的电影院显示器上时，条带明显减少，这使得这更加奇怪。下面是当网站跨越我的 mbp 的原生屏幕（左）和电影显示（右）时拍摄的单个屏幕截图（根本没有 photoshop）。 如您所见，左侧的条带严重得多。陌生人在 safari FF 或 ie9 中仍然有接近零的条带。下面是相同的情况，但在 FF

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

我也刚刚注意到 FF 窗口的 POSITION 改变了渲染。当超过一半的窗口在本地显示器上时，影院一侧会出现条带，而本地一侧则没有。当窗口移动到一半以上在影院显示器上时，条带显示在影院侧消失并出现在本机侧。对于 safari 也是如此，但是 chrome 没有这种行为，在原生端的条纹总是更明显，而在影院端则不太明显。

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

Answer 1

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

在 Firefox 中减少条带的原因是由于减色，像素溢出到下一种颜色，随机。有点像在带状渐变的顶部添加模糊。

也许这个放大会让它更清楚：

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

Answer 2

您正在rgb(85,85,85)渐变的中心和rgb(28,28,28)角落之间过渡。24 位 RGB 颜色空间（8 位 RGB 空间）只有 58 种独特的灰度颜色可用于在该区域中显示。

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

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

像10 位或 12 位灰度监视器那样失败，这是您将获得的最佳结果。使用您的显示器和这种设计，从技术上讲不可能获得更好的结果。

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

• 改变你的设计，在你的渐变中引入微妙的颜色变化（例如从深蓝色到灰绿色）。这会导致不同的 RGB 通道位可以在不同时间转换，从而将您的波段分解为更小的差异化颜色。

• 更改您的设计以增加您的动态范围（例如从纯白色到纯黑色），以便您可以使用更多的彩条。

• 更改您的设计以减少出现渐变的总距离，从而减少条带的宽度。

……或以上的某种组合。