The first time I ever saw this alleged bug was in Internet Explorer 7 yesterday. Images were rotating on a page in the form of a slideshow, fading in and out for a nice, smooth transition. One problem, though: in Internet Explorer 7 (and 6, as it turned out), one of the images would appear with a small cluster of white pixels around the black areas.
To make sure the image wasn’t corrupt, I saved it again using PhotoShop. No luck. Even after saving the image as a GIF instead of a JPEG, the white noise persisted in IE.
Luckily, some research resulted in finding Alex Judd’s post, which provided a relatively simple solution to the problem.
To summarize, the white noise occurs in both IE6 and IE7 on some (but not all) images when they fade in or out. This is especially true when you’re using a JavaScript library such as jQuery or script.aculo.us.
Evidently, IE mistakes some of the true-black pixels for transparent pixels, which causes the “white” noise (which may not necessarily be white, depending on the underlying background). One work around, as Alex points out, is to adjust the levels of the image in Photoshop very slightly—just enough to eliminate the true-black pixels.
To do this, open the image up in PhotoShop and perform the following steps:
- Select Image, Adjustments, Levels
- Move the Output Levels slider a few pixels to the right (or type in a small number, like 5)
- Save the image
In most cases, there won’t be a noticeable difference in color. Alas, this work around does solve the display problem in IE, but not without tampering with the original image. We’ll have to keep our fingers crossed in that IE8 finally addresses this issue.
Thanks for the solution, that’s a really weird issue, and somehow on my system the artifacts looks worse in IE8 than it did in IE7…
In our case the slideshow pictures are managed by the client (who has limited Photoshop knowledge), so we had to resort to something simpler: make the background behind the picture black ;) Doesn’t work with all designs but it was a decent tradeoff for us…
Just had someone spot that problem on our homepage too. Thanks for the writeup! We were able to get it fixed in no time.
We had the same issue while using a scriptaculous image fader on a client’s site. The pixels that were being dropped were dark but not actually true black. Playing with the levels and using the dodge tool to lighten the affected areas fixed the problem though. One day I’ll see if Mootools is also susceptible. Thanks for the write-up.
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.