Internet Explorer unwanted artifact on images when using javascript slideshow

Question

Hi there,

We're having the following weird (well...) behavior in all versions of Internet Explorer browsers when using javascript slideshows.

You can see what I mean here http://www.tospirto.net/index.php?ID=photo_gallery&Rec_ID=481

In the last 3 images there are white lines and artifacts created by the browser.
This is true as I said for all versions of Internet Explorer.

Have you seen this before??
Do you ave any idea what is causing this???

Thank you

Answer 1

I can see the artifacts - strange! This is a known issue in IE's JPEG rendering algorithm. If you enlarge the pictures in Photoshop, you will see that the artifacts are restricted within encoding blocks. (Pardon me, but I assume you know roughly how JPEG is encoded.)

Try encoding the images with a different quality, or even in a different format (like PNG, even though that would give you larger files). You can find other thoughs on how to solve this here: http://forum.jquery.com/topic/ie-dead-pixels-when-fading-images

Answer 2

It's a bug in the alpha filter, which is how transparent fades are implemented in IE (before version 9, which finally supports proper CSS opacity). When used directly on an image, any pixel with the RGB values 2,5,10 (aka #02050A) is treated as transparent.

This is how 1-bit transparency from eg. GIF is implemented in the alpha filter. Evidently Microsoft think this particular colour is so seldom used no-one will notice. Oops.

Avoid the bug by putting the alpha filter (or fade script that uses it) on a container <div> instead of on the image itself.

Alternatively, you can use an AlphaImageLoader filter (same hack as for transparent PNG loading on IE6) to load the image, or just get rid of the alpha filter when you're not in the middle of a fade (you still see the bug during fade but at least it doesn't appear at 100%).

Answer 3

OK I found what was wrong after some searching.
The effect is called swiss army image artifacts and you can find more about it here: http://www.dynamicdrive.com/forums/showthread.php?t=34462

Another great bug from explorers :)

The solution is on the referenced article which is to remove absolute blacks using the levels tool on the photoshop for example. Did a batch change using actions in photoshop for all pictures and works like a charm.