Bug Tracker

Opened 13 years ago

Closed 8 years ago

Last modified 8 years ago

#204 closed bug (fixed)

[PATCH] IE Opacity issues resolved

Reported by: brandon.aaron@… Owned by:
Priority: undecided Milestone:
Component: attributes Version:
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by dmethvin)

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;


Change History (7)

comment:1 Changed 13 years ago by 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;
 


comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by joern

Resolution: fixed
Status: newclosed

Added fix to SVN, still needs proper testing

comment:4 Changed 13 years ago by joern

Priority: blockercritical
Resolution: fixed
Status: closedreopened

Not yet working, Brandon tries to figure it out.

comment:5 Changed 13 years ago by brandon.aaro

Cc: brandon.aaron@… added

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

comment:6 Changed 13 years ago by brandon

Resolution: fixed
Status: reopenedclosed

Fixed in SVN Rev: 407.

comment:7 Changed 8 years ago by dmethvin

Cc: goodwork removed
Component: attributes
Description: modified (diff)
Priority: undecided
Resolution: fixed
Status: reopenedclosed
Type: bug

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

Note: See TracTickets for help on using tickets.