Side navigation
#204 closed bug (fixed)
Opened September 18, 2006 03:31AM UTC
Closed January 12, 2012 03:19PM UTC
Last modified March 15, 2012 09:45AM UTC
[PATCH] IE Opacity issues resolved
| Reported by: | brandon.aaron@gmail. | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | |
| Component: | attributes | Version: | |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I was having all sort of problems with opacity in IE and spent quite a while tracking all the issues down. I wish I could attach the diff but last time I tried attaching a file it errored out. I would love to throw some tests together but I'm already running behind on my project as it is. Hopefully someone else can help out with some testing. One thing to note is that I imagine this will break with other filters applied other than just an alpha filter but so would the current limited support for opacity.
Index: jquery/src/jquery/jquery.js
===================================================================
--- jquery/src/jquery/jquery.js (revision 312)
+++ jquery/src/jquery/jquery.js (working copy)
@@ -1425,14 +1425,20 @@
});
return p == "height" ? oHeight : oWidth;
- } else if ( p == "opacity" && jQuery.browser.msie )
- return parseFloat( jQuery.curCSS(e,"filter").replace(/[^0-9.]/,"") ) || 1;
+ }
return jQuery.curCSS( e, p );
},
curCSS: function(elem, prop, force) {
var ret;
+
+ if (prop == 'opacity' && jQuery.browser.msie) {
+ if (elem.style['filter'])
+ return parseFloat(elem.style['filter'].match(/d+/)[0])/100;
+ else
+ return 1;
+ }
if (!force && elem.style[prop]) {
@@ -1798,6 +1804,16 @@
disabled: "disabled",
checked: "checked"
};
+
+ // normalize opacity for ie ... elem is actually elem.style
+ if (name == 'opacity' && jQuery.browser.msie && value != undefined) {
+ return elem['filter'] = 'alpha(opacity=' + value * 100 + ')';
+ } else if (name == 'opacity' && jQuery.browser.msie) {
+ if (elem['filter'])
+ return parseFloat(elem['filter'].match(/d+/)[0])/100;
+ else
+ return 1;
+ }
if ( fix[name] ) {
if ( value != undefined ) elem[fix[name]] = value;
Attachments (0)
Change History (7)
Changed September 18, 2006 04:09AM UTC by comment:1
Changed September 18, 2006 09:49AM UTC by comment:2
In case you have more updates to this: You could upload your patch somewhere and post a link to it, that would be ok.
Any hints at how a test for this could be written would be very useful.
Changed October 06, 2006 01:01PM UTC by comment:3
| resolution: | → fixed |
|---|---|
| status: | new → closed |
Added fix to SVN, still needs proper testing
Changed October 06, 2006 03:11PM UTC by comment:4
| priority: | blocker → critical |
|---|---|
| resolution: | fixed |
| status: | closed → reopened |
Not yet working, Brandon tries to figure it out.
Changed October 07, 2006 03:32AM UTC by comment:5
| cc: | → brandon.aaron@gmail.com |
|---|
This should take care of everything.
New patch on revision 404: http://brandonaaron.net/jquery/opacity/opacity.diff
Example/Test: http://brandonaaron.net/jquery/opacity/opacity.html
Broken, unpatched revision 396: http://brandonaaron.net/jquery/opacity/opacity.broken.html
Changed October 07, 2006 08:08PM UTC by comment:6
| resolution: | → fixed |
|---|---|
| status: | reopened → closed |
Fixed in SVN Rev: 407.
Changed January 12, 2012 03:19PM UTC by comment:7
| cc: | goodwork |
|---|---|
| component: | → attributes |
| description: | I was having all sort of problems with opacity in IE and spent quite a while tracking all the issues down. I wish I could attach the diff but last time I tried attaching a file it errored out. I would love to throw some tests together but I'm already running behind on my project as it is. Hopefully someone else can help out with some testing. One thing to note is that I imagine this will break with other filters applied other than just an alpha filter but so would the current limited support for opacity.\ \ {{{\ \ Index: jquery/src/jquery/jquery.js\ ===================================================================\ --- jquery/src/jquery/jquery.js (revision 312)\ +++ jquery/src/jquery/jquery.js (working copy)\ @@ -1425,14 +1425,20 @@\ });\ \ return p == "height" ? oHeight : oWidth;\ - } else if ( p == "opacity" && jQuery.browser.msie )\ - return parseFloat( jQuery.curCSS(e,"filter").replace(/[^0-9.]/,"") ) || 1;\ + }\ \ return jQuery.curCSS( e, p );\ },\ \ curCSS: function(elem, prop, force) {\ var ret;\ + \ + if (prop == 'opacity' && jQuery.browser.msie) {\ + if (elem.style['filter'])\ + return parseFloat(elem.style['filter'].match(/d+/)[0])/100;\ + else\ + return 1;\ + }\ \ if (!force && elem.style[prop]) {\ \ @@ -1798,6 +1804,16 @@\ disabled: "disabled",\ checked: "checked"\ };\ + \ + // normalize opacity for ie ... elem is actually elem.style\ + if (name == 'opacity' && jQuery.browser.msie && value != undefined) {\ + return elem['filter'] = 'alpha(opacity=' + value * 100 + ')';\ + } else if (name == 'opacity' && jQuery.browser.msie) {\ + if (elem['filter'])\ + return parseFloat(elem['filter'].match(/d+/)[0])/100;\ + else\ + return 1;\ + }\ \ if ( fix[name] ) {\ if ( value != undefined ) elem[fix[name]] = value;\ \ \ }}} → I was having all sort of problems with opacity in IE and spent quite a while tracking all the issues down. I wish I could attach the diff but last time I tried attaching a file it errored out. I would love to throw some tests together but I'm already running behind on my project as it is. Hopefully someone else can help out with some testing. One thing to note is that I imagine this will break with other filters applied other than just an alpha filter but so would the current limited support for opacity. \ \ {{{ \ \ Index: jquery/src/jquery/jquery.js \ =================================================================== \ --- jquery/src/jquery/jquery.js (revision 312) \ +++ jquery/src/jquery/jquery.js (working copy) \ @@ -1425,14 +1425,20 @@ \ }); \ \ return p == "height" ? oHeight : oWidth; \ - } else if ( p == "opacity" && jQuery.browser.msie ) \ - return parseFloat( jQuery.curCSS(e,"filter").replace(/[^0-9.]/,"") ) || 1; \ + } \ \ return jQuery.curCSS( e, p ); \ }, \ \ curCSS: function(elem, prop, force) { \ var ret; \ + \ + if (prop == 'opacity' && jQuery.browser.msie) { \ + if (elem.style['filter']) \ + return parseFloat(elem.style['filter'].match(/d+/)[0])/100; \ + else \ + return 1; \ + } \ \ if (!force && elem.style[prop]) { \ \ @@ -1798,6 +1804,16 @@ \ disabled: "disabled", \ checked: "checked" \ }; \ + \ + // normalize opacity for ie ... elem is actually elem.style \ + if (name == 'opacity' && jQuery.browser.msie && value != undefined) { \ + return elem['filter'] = 'alpha(opacity=' + value * 100 + ')'; \ + } else if (name == 'opacity' && jQuery.browser.msie) { \ + if (elem['filter']) \ + return parseFloat(elem['filter'].match(/d+/)[0])/100; \ + else \ + return 1; \ + } \ \ if ( fix[name] ) { \ if ( value != undefined ) elem[fix[name]] = value; \ \ \ }}} |
| priority: | → undecided |
| resolution: | → fixed |
| status: | reopened → closed |
| type: | → bug |
This ticket somehow reopened itself while I was deleting spam comments.
UPDATE
On images that have patches of solid black in IE some of the black pixels would switch to white while the alpha filter was applied. To fix this I just removed the alpha filter if the value is 1. This also affects fx.js. Here is the updated diff ... still wish I could just attach it instead of pasting inline.
Index: jquery/src/jquery/jquery.js =================================================================== --- jquery/src/jquery/jquery.js (revision 312) +++ jquery/src/jquery/jquery.js (working copy) @@ -1425,14 +1425,20 @@ }); return p == "height" ? oHeight : oWidth; - } else if ( p == "opacity" && jQuery.browser.msie ) - return parseFloat( jQuery.curCSS(e,"filter").replace(/[^0-9.]/,"") ) || 1; + } return jQuery.curCSS( e, p ); }, curCSS: function(elem, prop, force) { var ret; + + if (prop == 'opacity' && jQuery.browser.msie) { + if (elem.style['filter']) + return parseFloat(elem.style['filter'].match(/d+/)[0])/100; + else + return 1; + } if (!force && elem.style[prop]) { @@ -1798,6 +1804,19 @@ disabled: "disabled", checked: "checked" }; + + // normalize opacity for ie ... elem is actually elem.style + if (name == 'opacity' && jQuery.browser.msie && value != undefined) { + if (value == 1) + return elem['filter'] = ''; + else + return elem['filter'] = 'alpha(opacity=' + value * 100 + ')'; + } else if (name == 'opacity' && jQuery.browser.msie) { + if (elem['filter']) + return parseFloat(elem['filter'].match(/d+/)[0])/100; + else + return 1; + } if ( fix[name] ) { if ( value != undefined ) elem[fix[name]] = value; Index: jquery/src/fx/fx.js =================================================================== --- jquery/src/fx/fx.js (revision 312) +++ jquery/src/fx/fx.js (working copy) @@ -451,7 +451,10 @@ if ( prop == "opacity" ) { if (jQuery.browser.mozilla && z.now == 1) z.now = 0.9999; if (window.ActiveXObject) - y.filter = "alpha(opacity=" + z.now*100 + ")"; + if (z.now == 1) + y.filter = ""; + else + y.filter = "alpha(opacity=" + z.now*100 + ")"; else y.opacity = z.now;