SVG banding in chrome

Question

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?

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?

Answer 1

You are transitioning between rgb(85,85,85) in the center of the gradient to rgb(28,28,28) at the corner. A 24-bit RGB color space (8-bit RGB space) has only 58 unique greyscale colors available to display in this region.

The distance from the corner of your gradient to the center is about 520 pixels on your top image. If evenly spaced, this means that the same color must be displayed for at least 9 pixels in a row. Most humans can easily perceive the difference between individual 8-bit shades of grey, especially in the middle of the color range.

As @Duopixel correctly points out, one of your gradients is dithered, helping to soften the transition between these colors. Interestingly, on your dual-monitor test some of the bands are dithered and some are not. This might be explained by hardware acceleration being applied only on one monitor versus the other.

Failing something like a 10- or 12-bit grayscale monitor this is the best result you are going to get. With your monitor and this design, it is technically impossible to get a better result.

If you want to make it less obvious with your current 24-bit color monitor, you can:

• Change your design to introduce a subtle color shift into your gradient (e.g. from dark blue to gray-green). This causes different RGB channels bits can transition at different times, breaking up your bands into a smaller differentiated colors.

• Change your design to increase your dynamic range (e.g. from pure white to pure black) so that you have more color bars to work with.

• Change your design to reduce the overall distance that the gradient occurs over, reducing the widths of the bands.

…or some combination of the above.

Answer 2

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

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:

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.