镀铬SVG带 [英] SVG banding in chrome

问题描述

当我发现Google Chrome浏览器中出现一些严重的条纹问题时，我正在使用svg文件生成平滑的渐变(20).当我将铬移到电影院显示器上时，甚至变得陌生，这种条纹明显减小了，这变得更加奇怪了.当网站跨越我的mbp的本机屏幕(左)和电影院显示(右)时，下面是一个屏幕抓取(根本没有photoshop). 如您所见，左边的条带更加严厉.野生动物园FF或ie9中的陌生人仍然接近零条带.下面是相同的情况，但在FF

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

我感觉这可能是驾驶员问题或类似问题.但是我真的想知道.这里到底发生了什么?为什么屏幕之间的显示如此不同?在两台显示器上进行一次屏幕抓取怎么可能会产生这样的变化?

I have a feeling this may be a driver issue or the like. But really I want to know. What the heck is going on here? Why would it display so differently between screens? How is it possible that a single screen grab across both monitors would yield a variation like this?

我也刚刚注意到FF窗口的POSITION改变了渲染.当窗口的一半以上在本机显示器上时，在电影院一侧而不是在本机一侧出现条带.当窗口移动到一半以上在电影院显示屏上显示时，带区显示在电影院一侧消失而出现在本机一侧. Safari也是如此，但是chrome没有这种行为，在本机端，条带总是更明显，而在电影院侧，条带更不明显.

I've also just noticed that the POSITION of the FF window changes the rendering. When more than half the window is on the native display there is banding on the the cinema side but not the native side. When the window is moved so that more than half of it is on the cinema display, banding show goes away on the cinema side and appears on the native side. This is also true with safari, however chrome does not have this behavior, banding is more noticeable on the native side always, and less noticeable on the cinema side.

这真的让我很奇怪.到底是怎么回事?

This is really weirding me out. What on earth is going on here?

推荐答案

我不确定切换显示器时会发生什么.

I am not sure what is going on when switching monitors.

在Firefox中减少条带的原因是由于 diethering ，像素溢出到了下一种颜色，随机. Kinda喜欢在带状渐变的顶部添加模糊效果.

The reason why banding is reduced in Firefox is because of diethering, pixels spill over to the next color, randomized. Kinda like adding a blur on top of the banded gradient.

也许此放大将使其更清晰:

Perhaps this zoom in will make it more clear:

左为Firefox，右为Webkit. Firefox似乎支持抖动渐变，而Webkit不支持.恐怕您对此无能为力.

Left is Firefox and right is Webkit. It seems Firefox support dithering gradients, and Webkit doesn't. I'm afraid there is not much you can do about it.

这篇关于镀铬SVG带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！