Image Colour In Chrome (OS X ) different from Chrome (Windows)

[Mr.XXIV]

Check out the "Trending" pointer image.

Apparently, in Chrome, comparing both the OS X and Windows version, the image ends up mismatching even when it has the exact same HEX as the css itself.

You can check it out for yourself at http://illingspree.com if you have both OS X & Windows to compare.

Does anyone know why this is happening? :/

[primexx]

colour profiles.

[Guth]

colour profiles.

This, its just how the two OS's render colour

The Mac uses a complex colourspace system called ColorSync to ensure colours appear identical on different devices. As a result, colours may sometimes be shifted slightly in the RGB space so that they appear to the eye identical on properly calibrated displays, printers, etc.

from: http://stackoverflow...on-windows-os-x

You'll probably have to use CSS to target OSX and find the correct colour codes to make your site display correctly.

[Mr.XXIV]

But why does it display normally on all the other browsers? :/

[primexx]

not all browsers use colour profiles for the same stuff (or at all)

[Mr.XXIV]

The iPhone and the browsers on Windows are fine. On OS X, only Opera wasn't affected.

I changed my color profiles back to the original and there was still no effect.

[Mr.XXIV]

lol you're missing the point. :)

[John S. Veteran]

Looks the same for me in OSX Chrome as your Windows screenie

[Mr.XXIV]

If I bend my laptops monitor, I'll notice the color difference in your image, it's still happening. :/

[ACTIONpack]

Use 2 different monitors use the same browser and the color will be different.

[SinsOfCube]

One way to fix this is by using CSS3 to make the pointer shape instead of using an image, though this won't be properly supported in older browsers.

http://www.css3shapes.com/ has several examples on shapes you can create with CSS3

[primexx]

One way to fix this is by using CSS3 to make the pointer shape instead of using an image, though this won't be properly supported in older browsers.

http://www.css3shapes.com/ has several examples on shapes you can create with CSS3

oh wow I hadn't even noticed that arrow, I guess that's what OP was asking about all along?

[Mr.XXIV]

oh wow I hadn't even noticed that arrow, I guess that's what OP was asking about all along?

I don't even know why I called it a pointer.

[jordan.]

This is an issue with using PNGs. Read about it here: The Sad Story of PNG Gamma ?Correction?

I assume you are using a PNG for the arrow and the rest of the bar uses CSS? But you need the arrow to be PNG for alpha transparency on the black bit? Can you instead make the arrow a .gif with full transparency and stretch the black bar all the way across underneath the .gif?

Or you can use a 1px png of the colour, and use that to fill the rest of the pink bar instead of CSS. This will make it match the arrow at all times, but it means that that particular bar+arrow will be a different shade of pink from other areas where it was intended to be the same.