gradientmaps
gradientmaps copied to clipboard
Colors wildly vary from Chrome to Safari
Please see screenshot: https://www.dropbox.com/s/ddmvfbfpjbm8fde/Screenshot%202014-03-14%2014.41.10.png
To me, Safari is much closer to what I would think it should be than Chrome. Not sure if this is a Chrome bug or something in the script.
Very interesting. There's nothing browser-specific in the code, so I'm guessing it has something to do with the different browser SVG implementations, perhaps around the SVG color-interpolation-filters. I wonder if it would be possible to prove that Chrome is displaying the wrong colors.
From my research it seems that Chrome is reading sRGB as linearRGB.
When I changed:
var componentTransfer = this.addElement(doc, filter, 'feComponentTransfer', svgns, {'color-interpolation-filters': 'sRGB'});
to
var componentTransfer = this.addElement(doc, filter, 'feComponentTransfer', svgns, {'color-interpolation-filters': 'linearRGB'});
then all 3 browsers seemed to display the same as Chrome did with it set to sRGB. It's still not displaying as expected which is why I think Chrome is displaying incorrectly here.
Also, I found this write up which might be related: http://tavmjong.free.fr/blog/?p=765
BTW, here it is on the site I'm building right now in the latest versions of all 3 browsers (FF left, Safari middle, Chrome right): https://www.dropbox.com/s/aamkagwpzarfqp5/Screenshot%202014-03-14%2017.11.59.png
Hi everyone,
In my case, Chrome, Opera and Firefox are OK (top), Safari is really darken (bottom) :
Trying to change the 'color-interpolation-filters' but I can't have the same result on Safari. Any idea ?
Thanks !
— G