PNG partial transparency not working in IE 8 with fadeTo()

[infinitemonkeys]

This problem is similar to #4786 though my problem description is somewhat different and I am using more current versions of JQuery and IE.

When using PNG graphics and fadeTo to fade in, the portions of the graphic that are completely transparent are properly transparent. The portions that are partially transparent are solid. In the case of the main logo graphic bottom left, this makes the mostly transparent background grid completely black. After much testing, I finally found out that using fadeIn and fadeOut for complete fades will fix the problem, though I do notice a brief moment during the fade in at the beginning where it looks like the problem still exists briefly, but quickly 'corrects' itself.

The problem does not appear in Firefox, Chrome, Safari, or Opera, only IE and appears in versions up to 8.0.7600. This does not seem to affect or be affected by opacity or hidden visibility. Other PNG graphics on the page suffer the same problem, but less obviously since they are over proper/similar backgrounds and 100% opacity works.

The corrected line with fadeIn replacing fadeTo is remarked below the improperly working line in the Hawk12alt.js file. Again, this 'works' but it looks like it is failing initially, then 'fixing' itself quickly.

I have attached the files necessary to reproduce this problem.

[infinitemonkeys]

HTML, JS, and CSS files

[addyosmani]

Your supplied test cases includes the necessary HTML/CSS/JS files but you forgot to include your /images folder.

I went in and replaced them with suitable transparent PNG files to carry out the test but it appears that everything is working fine in IE8 as per the other browsers with respect to fadeTo()'s behavior.

Could you re-submit a ticket with all the files necessary to reproduce your test just so we can check again to make sure?.

[vishaal.chedi@…]

Solution is this

.item img 
{
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
	zoom: 1;
}

source :  http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome