Bug Tracker


Ticket #7400 (closed bug: duplicate)

Opened 3 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:


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

comment:1 Changed 3 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 3 years ago by snover

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

comment:3 Changed 3 years ago by snover

Duplicate of #6652.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.


Add a comment

Modify Ticket

as closed

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.