Skip to main content

Bug Tracker

Side navigation

#7400 closed bug (duplicate)

Opened November 04, 2010 03:36PM UTC

Closed November 09, 2010 03:07AM UTC

Last modified November 09, 2010 03:07AM UTC

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:
Description

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.

Attachments (0)
Change History (3)

Changed November 04, 2010 03:44PM UTC by arjo comment:1

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.

Changed November 09, 2010 03:07AM UTC by snover comment:2

resolution: → duplicate
status: newclosed

Changed November 09, 2010 03:07AM UTC by snover comment:3

Duplicate of #6652.