jQuery/css fade issue with nested elements in ie8 (only)

Question

Possible Duplicate:
Disappearing images in IE8 jQuery Cycle

I am fading a set of nested elements, in and out, to reveal the background image of the page. The nested div/article elements have been given alpha channel opacity and this is overridden with semi-transparent png's in IE.

The fade in and out work fine in FF, Chrome, ie6 (yes, ie6!!!), ie7 and ie9 but sadly NOT in ie8.

HTML:

<div id="wrapper">
   <div id="limiter">
      <div id="mainContent" class="cornerRadius10 alpha40Black">
         <header class="cornerRadius6 alpha50Black">
            <h1>Title Here</h1>
         </header>
         <article class="contentArticle cornerRadius6 alpha50Black">
            Content here.
         </article>
         <article class="contentArticle cornerRadius6 alpha50Black">
            More content here.
         </article>
      </div>
   </div>
</div>

css:

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5)
}

jQuery:

 $('#wrapper').children().animate({
    opacity: 0
 }, 2000 );

 setTimeout(function() {
    $('#wrapper').css('visibility' , 'hidden');
 }, 2000);

I have also tried this jQuery:

    $('#limiter').children().fadeOut( 2000 );

Any combination of the above will work in all browsers except for ie8. When you try to apply the fade out or fade in function to the wrapping parent element, all that happens is there is a pause (the length of time the fade animation is set to) and then the elements you want to fade disappear instantly with no fade effect.

I have worked on this for a few days and exhausted Google for solutions and possible fixes/workarounds and nothing has even come close.

Anyone have any ideas?

Regards, Matt.

EDIT:

I have made some progress in debugging this problem.

I removed all reference to semi-transparent background and tried to apply the jQuery fade animation just to check that the background wasn't masking the real issue.

Interestingly, even with no semi-transparent backgrounds applied (also tested with fully opaque backgrounds), the fade animation still doesn't work. Exact same symptoms. so I did a quick search and found this on the jQuery Bug Tracker: fade not working on inner divs in ie8

As per the comments on this page I applied filter: inherit; to the children containers and this made a difference. Now the content (text and images) are fading in and out but the background (Opaque or (semi)Transparent) is not. It still stays unchanged for the duration of the delay then snaps in invisible of visible.

Anyone got any thoughts on how to further this workaround?

EDIT:

Tested in ie9 and it works just fine. This bug is relevant ONLY to ie8.

Thanks, Matt.

Answer 1

on your css try this one:

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.4);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=40);
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);
}

If you have no other problem with other browsers this should work...of curse you have to update jquery accordingly

EDIT:

jQuery:
$('#wrapper').children().animate({
    opacity: 0.4,
    filter: 'alpha(opacity=40)'
 }, 2000 );

that is a sample jquery that animates from whatever opacity was to 0.4. If you wish to have standard opacity after the page loads, you do not need jquery of curse, but if you need to change en elements opacity on one triggered event you have to use a jquery like so.

EDIT:

If I had your question right I made a solution in jsFiddle. I can not test it in older ie version though. I hope that works :)

Answer 2

I'm not sure if this is your problem, but I think you are setting the background wrong:

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}

background is a shortcut property which is used to set multiple values at the same time. If you leave out sub-values as you are doing, then it resets the other values. you should be using the individual background properties instead:

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background-color: rgb(0, 0, 0);
    background-image: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background-color: rgba(0, 0, 0, 0.4)
}