Troubles with Microsoft opacity filter
Published | 14.51, 18th of July 2008, by Jay Vincent | Technical
Ergh! I just spent about a few hours creating a javascript fade-in slideshow for jpg images, and what seemed to be random white pixels kept appearing in the photographs.
After changing the containing element's background colour, I noticed that these random pixels were transparent - a very interesting occurrence for a jpg image - a format 'seemingly' incapable of transparency.
I did a little searching online and found that this isn't a very well documented bug, but a few other developers had experienced the same problem.
Turns out that when the MS-only opacity filter is used (either through CSS or javascript), areas of true black colour (#000000) incorrectly become fully transparent, no matter what the opacity value for the image. This problem occurs in both IE6 and IE7 - IE8 is expected to deprecate this non-standard approach and comply to W3C standards of opacity by implementing the 'opacity' style property - which netscape engines use without problem.
The only solution I can find is to edit the image in photoshop to slightly brighten any true black pixels, however, due to jpg compression, it can sometimes take a few attempts to rid the image of any #000000 occurrences.