Sign in to follow this  
Followers 0

16 posts in this topic

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

1 person likes this

Share this post


Link to post
Share on other sites

You can probably get your monitors colour profile and load it into windows and see how it looks. I doubt it will be the same though. I noticed that myself that colours tend to appear worn out on the iphone as well.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Mate,

nobody will put your website in two or more browsers side by side :)

Share this post


Link to post
Share on other sites

lol you're missing the point. :)

Share this post


Link to post
Share on other sites

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

post-8780-0-94981800-1355462421.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

1 person likes this

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.