Skip to main content

Bug Tracker

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 brandon.aaro comment:1

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;
 


Changed September 18, 2006 09:49AM UTC by joern 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 joern comment:3

resolution: → fixed
status: newclosed

Added fix to SVN, still needs proper testing

Changed October 06, 2006 03:11PM UTC by joern comment:4

priority: blockercritical
resolution: fixed
status: closedreopened

Not yet working, Brandon tries to figure it out.

Changed October 07, 2006 03:32AM UTC by brandon.aaro 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 brandon comment:6

resolution: → fixed
status: reopenedclosed

Fixed in SVN Rev: 407.

Changed January 12, 2012 03:19PM UTC by dmethvin 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: reopenedclosed
type: → bug

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