macos - Chrome 中的 SVG strip

Question

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

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

我还刚刚注意到 FF 窗口的位置改变了渲染。当超过一半的窗口在 native 显示器上时，影院侧会出现 strip ，但 native 侧不会出现。当窗口移动到一半以上显示在影院显示屏上时， strip 显示会在影院端消失并出现在 native 端。 Safari 也是如此，但是 chrome 没有这种行为， strip 在 native 端总是更明显，而在影院端则不太明显。

这真的让我很奇怪。这里到底发生了什么？

Answer 1

您正在渐变中心的 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 channel 位可以在不同的时间转换，从而将您的色带分解为较小的差异化颜色。

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

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

...或以上的某种组合。