You wouldn’t believe it was true, but there is an incredibly annoying problem in Internet Explorer 6 (IE6) where fading out jpg images using nice libraries like script.aculo.us or prototype.js gives a strange ‘white noise’ effect on the image during the transition.
Well, it turns out it is actually a bug in IE6 where it takes true-black colours in JPG images to be transparent, and thus shows the background colour behind it when fading the image (in our case white).
So how to work around it?
Easy – go into Photoshop and adjust the levels to remove the true black in the image – Image -> Adjustments -> Levels and slide the true black slider 1 or 2 pixels to the right. Save out your image again and the jpg artifacts are gone.
Weird but true! and here’s the pointer I found to solve the problem from a Slimbox forum
- SNIP -
“white noise”: After making some tests with images showing the problem, I’ve come to the conclusion that:
- It is NOT related to the software generating the images.
- It shows in totally black areas of a jpeg image in Internet Explorer only.
It’s like the black portions of the images are interpreted as transparent by IE, so the background color (white by default) shows through them. So far I’ve only seen this happening in Internet Explorer (both IE6 and IE7). Thank you Microsoft for making the lives of web designers and programmers so fun.
May 10th, 2007 at 2:08 pm
You are the wind beneath my wings.
May 16th, 2007 at 5:51 am
Thank you very much.
October 5th, 2007 at 6:27 am
Thanks for helping me get to the bottom of this one. A most annoying bug from those world (in)famous MSIE engineers.
November 26th, 2007 at 12:48 pm
Wow! Thanks!
This saved me a ton of what would have been useless effort today.
January 30th, 2008 at 2:57 pm
Thank you so much … driving me crazy!
January 31st, 2008 at 8:16 am
That is the most annoying bug ever. Thanks for the info though. I personally believe that people should be banned from using IE6 to stop shit like this…
June 24th, 2008 at 5:35 am
Awesome. Spent hours trying to figure this out.
Alternatively, you can set a div around the image and set the background to black #000000. However the fade between pictures will blend with black instead of white, and be darker overall.
Also, for those that use GIMP (free image editor alternative to Photoshop), the best way I could figure out was to go to Colors > Map > Colors Range Mapping… and set the black end on the Destination. I had to set mine to #050505 to get good results. I am new to GIMP, and image editing overall, so maybe somebody knows a better way…
Here is the website I used it on. 12 photos fade in the header http://www.yachana.com.
September 27th, 2008 at 1:19 pm
Awesome! Everyone said “nothing can be done; it’s just a bug in IE that you can’t fix.” Kudos. I used it here: http://www.mammasmilk.com
October 6th, 2008 at 2:36 am
Thx for the info! It really gave me an idea on what its all about on this bug. By reading this it occured to me an idea how you can fix this problem in every case,because adjusting levels in PS to remove the true black didnt quite work for me for all of the pixels in my images. So heres how to really remove ALL true black pixels:
In photoshop go to: Image -> Adjust -> Replace color. Select #000000 for the color that is to be replaced and move the brightness slider on the bottom 1-3 to the right.
This made it work for me in every case.
October 22nd, 2008 at 10:57 pm
THANK YOU! Even a year and a half later this post is still giving! Thanks to commenter #9 too for the quick, down-and-dirty fix.
January 27th, 2009 at 10:17 am
amazing, thanks for the fix! 10 minutes to launch and you saved the say.
March 16th, 2009 at 6:08 am
Thank you a lot, you saved me – white noise appearing on IE7 as well.
Thank you Microsoft for making my life adventurous, i really needed this sort of things.
April 8th, 2009 at 7:26 pm
Thank you very much for this. I have been using jquery.cycle for ages but have only just come across this bug. Thankfully you helped me solve it in a matter of minutes.
Much appreciated
I simply did #s1 {bg:#000;}
May 14th, 2009 at 5:31 pm
Another thank you. I was wondering what frick was going on? IE7 for me too.
(Got here from Michael Leigeber’s site.)
Thanks 8^]
August 5th, 2009 at 2:57 pm
This is indeed a very annoying issue, also appearing in IE8. However, to edit all images where the problem arise is a very awkward and time-consuming task, which also doesn’t really solve the problem.
Thankfully, there is a proper solution, applied to the actual code behind the image windows – see http://web.archive.org/web/20080207184902/www.dolem.com/forum/showthread.php?tid=206
Now this applies to a Lightbox variant called Lytebox, but I guess this part of the code is more or less the same in most of the myriads of variants out there.
September 23rd, 2009 at 1:03 pm
Thanks so much!!!!!!!!!!
September 25th, 2009 at 3:03 pm
Thank you so much for this solution..! You have saved a lot of time for me.
So funny bug!
March 22nd, 2010 at 3:20 pm
zoom: 98% or zoom: 99% does do the trick for me…
July 27th, 2010 at 8:16 am
[...] scripts that fade images in and out, and these changes where bringing out the bug. I found a fix at http://www.alexjudd.com. The solution involves editing the levels of each affected image in Photoshop, so that no [...]