• 0

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


Question

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? :/

post-388684-0-83682400-1355372013.png

post-388684-0-91211400-1355372018.jpg

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

post-388684-0-62896400-1355450650.png

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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?

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.