IE8 Overlay issue: fadeIn & filter #39

Closed
mynameistechno opened this Issue Oct 4, 2011 · 3 comments

Projects

None yet

3 participants

@mynameistechno

There is an issue with IE8 when using the overlay and using jQuery's fadeIn() and fadeOut(). The overlay is fully opaque, all black. I thought it was related to opacity, but the correct css rules are already specified and work; turned out to be some inline css filter rules that were messing with it. The rules apparently are a result of using fadeIn and fadeOut.

This article mentions a similar issue and how to solve it:

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Changing _showOverlay to remove the inline filter rule fixed it for me (same need sto be done with hideOverlay):

_showOverlay: function() {
  $("#guider_overlay").fadeIn("fast", function(){
      if(this.style.removeAttribute){
          this.style.removeAttribute('filter');
      }
  });
},

Worked for me, although a more optimal solution that doesn't involve the use of callbacks would be desirable.

@jeff-oldgithub

Thanks. I always knew there was a problem there but kept looking in the
CSS, and couldn't figure out what to do about it. I'll add this change to
Guiders.

On Mon, Oct 3, 2011 at 11:55 PM, Mark Matyas <
reply@reply.github.com>wrote:

There is an issue with IE8 when using the overlay and using jQuery's
fadeIn() and fadeOut(). The overlay is fully opaque, all black. I thought it
was related to opacity, but the correct css rules are already specified and
work; turned out to be some inline css filter rules that were messing with
it. The rules apparently are a result of using fadeIn and fadeOut.

This article mentions a similar issue and how to solve it:

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Changing _showOverlay to remove the inline filter rule fixed it for me
(same need sto be done with hideOverlay):

_showOverlay: function() {
$("#guider_overlay").fadeIn("fast", function(){
if(this.style.removeAttribute){
this.style.removeAttribute('filter');
}
});
},

Worked for me, although a more optimal solution that doesn't involve the
use of callbacks would be desirable.

Reply to this email directly or view it on GitHub:
#39

@jeff-oldgithub

This was fixed; anyone reading this should use the newest version (currently 1.2.0).

@bennadel

Just came across this in Google. Not using this project, but it fixed a post-fade-out CSS cleanup issue I was having in IE7/8. Awesome and thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment