[PATCH] IE Opacity issues resolved

[[email protected]…]

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;

[brandon.aaro]

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;
 

[joern]

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.

[joern]

Added fix to SVN, still needs proper testing

[joern]

Not yet working, Brandon tries to figure it out.

[brandon.aaro]

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

[brandon]

Fixed in SVN Rev: 407.

[dmethvin]

This ticket somehow reopened itself while I was deleting spam comments.