Why are the new (1.10.0) jQuery UI images the wrong color in Firefox?

Question

I'm currently using jQuery UI 1.9.2 and want to upgrade to 1.10.0. I have a custom theme and used the URL at the top of my CSS file to visit the ThemeRoller.

My colors didn't look right, so I went through and double checked all my settings. I was using 3-digit hex colors and tried changing them to 6 digits, but that didn't help anything. I cleared my cache and restarted my computer. No change.

I started digging a little deeper. I opened the image in PSP, the colors are fine. They also appear fine in Safari and Chrome. They look fine in Firefox 12 on the laptop, but not in Firefox 12 on the PC (Win XP on both machines).

I thought maybe there was an add-on messing with my colors. But I opened the 1.9.2 image file in Firefox and it looks correct.

1.9.2 ->        1.10.0 ->

I just added the two images to this post from my own computer. I'm looking at the preview with the images side-by-side. The one on the left (1.9.2) is the one I want. The one on the right (1.10.0) looks much more purple on my screen. The background color is supposed to be #0066cc. I used a color picker to view the color displayed by Firefox. The 1.10.0 version has a background color of #4756c7. I see the same problem with all the new images, even the flat ones.

I looked at the two files with ExamDiff Pro and they are very different. Plus, all the new images are larger than the old images (more than twice as many bytes).

Luckily, I only copied over the CSS file and the new animated-overlay.gif, so I am just going to keep using the old images. But I want to understand what's going on.

So what did jQuery UI do differently when generating their images? And why did they change them? And why does Firefox 12 on my computer show them with different colors?

Answer 1

Hard to say exactly without seeing the actual files, but it sounds like browser variations in the way that ICC color profiles are being handled. More details on FireFox specifically over here. But it might not be FireFox being the problem & more connected to whatever your main development browser is & how it handles ICC profiles as well.

Like the FireFox article implies, the feature is fairly old in many browsers but what I have noticed is many modern browsers nowadays are actually paying attention to ICC profiles as a default, whereas before that feature was disabled by default.

Which is all to say I would see how these images look if you strip out all EXIF metadata using a tool like exiftool. Without an embedded ICC color profile, the images should render similarly between all browsers.

And to strip out all metadata with exiftool you would just run a command like this; assuming your file is named test.jpg:

exiftool -all= test.jpg

You will end up with a backup file tagged as test.jpg_original that still has EXIF data embedded and a cleaned test.jpg that now is 100% stripped of EXIF data.