26

I am getting this weird problem in IE with a CSS Overlay I am applying for a lightbox. Basically, I use fadein and fadeout for jquery - the problem is that everything works fine EXCEPT in IE.

In IE - I get no fadein - rather it just goes straight to opacity background.

On fadeout - it removes the "opacity" for < 1 sec second and renders the page a "solid color" before removing the overlay.

Anyone know how to fix this bug ? Its really annoying - I am using all the correct filters etc its just the fadein and fadeout in IE ?

Amarnath Balasubramanian
  • 9,300
  • 8
  • 34
  • 62
  • 2
    Are you using a transparent .png for the overlay or an alpha filter on a solid background colour? IE can't fade transparent .png's properly, so that could be causing your problem. – Pat Aug 16 '09 at 15:08
  • Note that there are a number of tags old IE never supported for alpha filters, like TR. See the list of supported tags towards the bottom of this page: http://msdn.microsoft.com/en-us/library/ms532967(v=vs.85).aspx – Chris Moschini Aug 03 '12 at 20:50

8 Answers8

48

I had the same problem in IE8. Setting the opacity of the DIV in JavaScript before I called fadeIn() solved the problem:

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

This was using just a plain DIV not a transparent PNG.

woodstylee
  • 543
  • 3
  • 6
  • 4
    But what if I use a transparent image in background? This doesn't work with transparent image in background. – gautamlakum Nov 09 '10 at 13:51
  • Here: Another answer for when using transparent images: http://stackoverflow.com/questions/1808015/jquery-fadein-ie-png-issue-when-loading-from-external – YOMorales Jul 12 '11 at 21:55
  • Good answer!! Could also be chained, $('.overlay').css('filter', 'alpha(opacity=40)').fadeIn(500); – neelmeg Oct 10 '13 at 15:52
  • It's worth mentioning that making this change in JS is not strictly necessary. It's just that calling the jQuery css function adds the filter property as an inline style to the element, which is what makes this work. So if you prefer not to add more javascript code, you can just change your HTML like
    – RTF Aug 30 '14 at 20:41
6

maybe is this a good solution to you (for me it is). The solution is simple but effective (and very nice). IE has problems with alpha transparency when the background of it's parent has no color (total transparency).

What we do here (see example below) is to add a div first that is almost transparent (transparent to the eye). Because it is the first div inside the canvas/container (=> a div for example) and it is placed absolute, all content after this div will be placed on top of the the first div, so this becomes the background of all other content inside this canvas.

Because there is a background now, IE shows no nasty black spots (pixels) or black area's when fading in or out (when changing opacity) or when set the opacity of the canvas to a value below 100.

How to - example with a 100x100 image:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

To fade in or fade out the image with jQuery:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

This is also possible:

$("myImage").fadeIn("slow");

That's it!

Nice thing is that this solution also works with VML/SVG (Raphael) or other content that has alpha transparency. Also you don't have to change/hack your JS code, because this "hack" does not effect other browsers.

Hope it helps.

Erwinus
  • 143
  • 1
  • 3
0

Also have prob using this junk Browser.

You can also check when the browser is IE instead of using .animate({opacity:0}) you will have to use .animate({opacity:'hide'}).

Jason Plank
  • 2,336
  • 5
  • 31
  • 40
Jerome
  • 1
  • 1
0

Hard to tell without exact code, but I know IE has problems with applying fade's on elements with position: relative so if I were you I would check if elements you are trying to fade, either directly or thru their parents, have position: relative applied. Hope it helps.

spirytus
  • 10,726
  • 14
  • 61
  • 75
0

In the situation I observed this issue I was able to partially fix it using the method outlined by @Erwinus. Use of that technique made the halo far less ugly, but an odd black aura could still be seen.

I was able to apply a background to the image itself,

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

And this fixed the problem perfectly. I stuck it in my iefix.css file that is included via conditional comments. It required no extra HTML and provided an even nicer fade effect than the other solution.

This would obviously not necessarily be the solution for all cases, but was viable for mine and worked well.

morewry
  • 4,320
  • 3
  • 35
  • 35
0

Here is another potential fix to this issue... jQuery supposedly has some issues (prior to 1.4?) with detecting opacity set via CSS. It appears to not have issues if you set the opacity of the elements using jQuery prior to animating the opacity (fadeIn, fadeOut, fadeTo, and animate). As in, you can both set the opacity using CSS for the browsers that support it and then also stack on top of that setting the opacity using jQuery and it should then work properly in IE. This is also the case for display none.

Example:

$('#element').css("opacity","0").fadeIn("slow");

Source: http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3

styol
  • 1
0

Ok, I had issues with this and none of the solutions I found online worked. It was driving me crazy because if you look at the W3C site: http://www.w3schools.com/Css/css_image_transparency.asp , it worked in IE8. But I copy it to my dev environment it doesn't.

I had this code:

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

And this markup:

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

It worked in FF, Chrome, everything BUT IE8.

What we ended up realized was the IE8 was not applying the script when running against localhost. I copied this code up to a webhost and BAM!, works perfectly. Don't know why IE8 does this, but I see it as one more reason for devs to dislike IE.

Maybe that's just me.

LoveMeSomeCode
  • 3,888
  • 8
  • 34
  • 48
0

@LoveMeSomeCode (I can't reply directly to your post since stackoverflow apparently thinks I need X amount of reputation because I can response to someone's message - why?!?!) I believe this is because a really lame feature that comes with IE8's "compatibility view" (yes, even lamer than the mode itself).

I noticed that folks were getting all sorts of weird behavior when viewing the website I develop at work (when on IE). After some playing around, I discovered IE8 has a setting which OUT-OF-THE-BOX sets all local pages to display in compatibility view! Regardless of your document declaration or how strict your markup is, IE8 will use compatibility view for all intranet pages (and I suppose localhost is the same).

Click Tools > Compatibility View Settings > Untick the box that says "Display intranet sites in Compatibility View"

Why on earth this is enabled by default I have no idea, but it has caused a whole lot of hassle with isolating and then telling people to fix.

SikoSoft
  • 584
  • 1
  • 7
  • 13