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