Bug Tracker

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#7400 closed bug (duplicate)

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

Reported by: arjo Owned by:
Priority: undecided Milestone: 1.5
Component: unfiled Version: 1.4.3
Keywords: Cc:
Blocked by: Blocking:


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".


// 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.

Change History (3)

comment:1 Changed 6 years ago by 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.

comment:2 Changed 5 years ago by snover

  • Resolution set to duplicate
  • Status changed from new to closed

comment:3 Changed 5 years ago by snover

Duplicate of #6652.

Note: See TracTickets for help on using tickets.