If I rotate the hue by 90deg using something like:
.foo
{
-webkit-filter: hue-rotate(90deg);
}
it does rotate the hue, but it doesn't look correct. For instance, if I perform the same shift in photoshop I get different results. I also noticed that I get different results between Chrome and Safari.
If I take a screenshot and open up the modified image (via the -webkit-filter) in photoshop, I can see that the hue is only rotated by about 60 degrees, and also the saturation has been reduced.
Is there a way to get webkit browsers to rotate the hue more reliably, or am I missing something basic about this filter approach.
Here is a fiddle demonstrating the issue: