SVG banding in chrome

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?

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.