Gradient banding - Illustrator CS6, Safari (CSS3)

I'm getting severe banding with gradients saved in Illustrator CS6 (vector gradients) or Photoshop CS6 in addition to gradients in Safari (CSS3 gradients). The strange thing is that when I preview these pdf files in Preview.app or Quicklook, the banding is dithered nicely and reduced considerably (looks more liked it is supposed to). It would be nice to know how Adobe renders gradients vs Apple (system-wide), so I can find where the culprit is. I originally thought it might be graphics card related. It's NOT hardware related, though, because I've tested the same files across several mac systems with similar results. Any ideas?

The first screenshot is from inside iIllustrator CS6. The second is from Quicklook/Finder preview. The third screenshot is from opening the vector pdf inside Preview.app. I don't think this is only an Adobe issue, because like I said CSS3 gradients also have heavy banding in Safari. The blue gradient (screenshot #4) is from Safari. Lots of banding, but you can't see that well with a reduced image. Not sure if these can be seen at full size (?).

Thanks in advance for any insight/workarounds. 😉