title: SVG banding in chrome
body: <p>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).
  <img src="https://i.stack.imgur.com/5Iphm.png" alt="macbook pro native display left, 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</p>
  
  <p><img src="https://i.stack.imgur.com/l2JY7.png" alt="now from FF"></p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>This is really weirding me out. What on earth is going on here?</p>