Setting CSS opacity in IE to an element showing PNG image with partially transparent pixels makes these pixels appear black

[arjo]

This problem occurs in any 1.3.x and and 1.4.x release. The black pixel problem is a bug in the IE filters / layout system which we cannot fix, but at least we can work around it when the elements should be fully opaque.

The solution is to not apply the "alpha(opacity=n)" filter when the opacity value is "1".

Code

// Set the alpha filter to set the opacity
var opacity = jQuery.isNaN(value) ?
	"" :
	"alpha(opacity=" + value * 100 + ")",
	filter = style.filter || "";

becomes (jQuery v1.4.4rc2 line 5269)

// Set the alpha filter to set the opacity
var opacity = jQuery.isNaN(value) || parseInt( value, 10 ) + "" === "1" ?
	"" :
	"alpha(opacity=" + value * 100 + ")",
	filter = style.filter || "";

See attachment for test case and solution.

[arjo]

Instead of an attachment jsFiddle:  http://jsfiddle.net/5gXyk/

You'll need IE8 as IE7 does not support dataurl which I use in the example. Note that initially the image is OK as there is no filter "alpha(opacity=n)" applied yet. Click the button to toggle opacity and see the black pixels appear.

[snover]

Duplicate of #6652.