(I’ve found a ‘solution’ to this… see bottom of post)

Problem

I’ve been trying to figure this out for the whole day today and have finally succumbed to the realization that I’m pretty sure I’ve found a bug in jQuery, even the latest version.

The example link is below. The mark-up is very simple and all that is being done is:

• Create a box with a single pixel semi transparent PNG image
• Call either fadeIn or fadeOut on any HTML element on the page… suddenly (and strangely) the box magically has a semi transparent gradient on it!

So if anyone out there know how to fix this, I’m all ears. I’m about to go searching on the net for an alternative fade in/fade out library that doesn’t produce these results but would obviously like to just use the built in jQuery methods.

Click here to see the bug and source! (You’ll have to view in IE 7/8 to see the bug)

Before fade out on the black box:

After fade out on the black box:

VERY STRANGE!!!!

Solution

I knew this had to be an issue with IE’s stupid DXImage transform stuff but didn’t really want to go down the route of fiddling with it but in the end, had to do it. And also had to add a stupid little hack to target IE directly.

Step 1:

Create a IE conditional div wrapper around everything under body:

<!--[if IE]><div id="ieWrap"><![endif]—>

(the rest of the page html goes here)

<!--[if IE]></div><![endif]—>

Step 2:

Target the elements in CSS for IE that have the background PNG transparent image:

#ieWrap .productView .productThumbnail a
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grey_overlay.png',sizingMethod='scale');
}

Click here for solution

And, a day later i found out this isn’t working as expected in IE 7… great… so figured out i had to add: width:100% to the style with the DXImageTransform.