Opacity Bug in IE

I put together a quick jQuery based slider for a site using the fadeIn/fadeOut methods and some z-index and delay tricks everything looked good to go in IE, Firefox and Safari so I posted it for customer review. One problem, in IE 9 everything looked great, in IE 7 which the customer was still using, 3 of the 6 slides had “white spots” on them during the fade transitions.

What’s the issue? Internet Explorer, again! The jQuery fade transitions work by step adjusting the opacity on the target object. IE 7 and 8′s opacity filter has an bug that translates color #02050A to transparent so that nearly black shade in my slides was showing the light gray background color of the container div. One option I used was to open the images in Photoshop and replace the color of the pixels that were set to #02050A to a variation close enough so that the eye can’t really tell the difference. That was okay in my case as the impacted pixels were few. If you have large regions or your graphics designer just really doesn’t want you messing with their images than a second option is to wrap the image with a div and set that div’s background color to #02050A. Either way your jQuery fadeIn/Out transitions should look the same now in IE 7/8 as they do in every other browser.