Monday, April 30th 2007


White noise jpg fading problem in Internet Explorer 6
posted @ 5:23 am in [ Javascript -Prototype Library -Scipt.aculo.us -Technology -Web Design -Web2.0 ]

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.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

26 Responses to “White noise jpg fading problem in Internet Explorer 6”

  1. Jeffrey Says:

    You are the wind beneath my wings.

  2. KP Says:

    Thank you very much.

  3. Ronny Adsetts Says:

    Thanks for helping me get to the bottom of this one. A most annoying bug from those world (in)famous MSIE engineers.

  4. Josh Mormann Says:

    Wow! Thanks!

    This saved me a ton of what would have been useless effort today.

  5. Steven Arnold Says:

    Thank you so much … driving me crazy!

  6. the Law Says:

    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…

  7. Richard Dunbabin Says:

    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.

  8. Jude Says:

    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

  9. lukatsch Says:

    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.

  10. Jeremy Ricketts Says:

    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.

  11. Abraham Says:

    amazing, thanks for the fix! 10 minutes to launch and you saved the say.

  12. tommi Says:

    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.

  13. Syd Lawrence Says:

    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;}

  14. SMc Says:

    Another thank you. I was wondering what frick was going on? IE7 for me too.

    (Got here from Michael Leigeber’s site.)

    Thanks 8^]

  15. Mr Love Says:

    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.

  16. William Says:

    Thanks so much!!!!!!!!!!

  17. Alexandros Says:

    Thank you so much for this solution..! You have saved a lot of time for me.
    So funny bug!

  18. Arno Says:

    zoom: 98% or zoom: 99% does do the trick for me…

  19. If At First You Don’t Succeed « Jeremiah Harvell Says:

    […] 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 […]

  20. Linnie Says:

    Thanks for this, very useful!

  21. Mr Chimp Says:

    Very strange bug. Arno (comment #18) makes an interesting point. I fixed all my images but the bug continued. I refreshed, cleared my cache. No luck. Then pressed CTRL&+ then CTRL&- and it works! I don’t understand why but it does! Thanks! (IE8)

  22. White Spots on Fading Images in Internet Explorer « Mr Chimp Learns to Write Says:

    […] some link love for the people who knew the answer: Alex Judd – Stack Overflow GA_googleAddAttr("AdOpt", "1"); GA_googleAddAttr("Origin", "other"); […]

  23. Mr Chimp Learns to Write » Blog Archive » White Spots on Fading Images in Internet Explorer Says:

    […] some link love for the people who knew the answer: Alex Judd – Stack […]

  24. gromit Says:

    Thank you so much for this. I was having issues with transparent pixels in IE7 and IE8 in my nivo slider, would never have figured this one out without your post.

  25. hades200082 Says:

    We encountered this issue at work when a client had issues with black in images in their rotating banner.

    In response we now replace rgb(0,0,0) with rgb(1,1,1) in all images uploaded via our CMS using the GDI+ library. (It’s a .net CMS)

    I suspect the same could be done with GD or ImageMagick in PHP and since it’s only done when the image is first uploaded any future use or re sampling of the image should not require the same operation again.

  26. Jorge Says:

    I seem to have solved this problem by giving my images a black, non-transparent background using this code:

    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff000000)”; /* IE8 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff000000);

    This goes in your css, in the image tags that you are having the issues on. You are basicly giving your images a gradient background from opaque black to opaque black, which removes the transparency from the image background. Giving it a “background: #000” or similar makes it black, but since it is transparent, the background remains invisible.

Leave a Reply