Rambling Labs Blog Ramblings on software development

  • jQuery fadeIn and fadeOut: IE bug workaround

    I was trying to do some cool effect on a project I'm working on by fading in the front page.
    The trick looks really nice and it's easy to implement.

    Just make the body hidden like this:

    <body style="display: none;">
    

    And in the JavaScript file do this:

    $(function(){
      $('body').fadeIn(2000);
    });
    

    Checked it out on Firefox and Chrome. It works perfectly, so smooth.
    And that's it!... Or so I thought...

    Checked it out in IE 8 or less and, oh surprise, it doesn't work. It fades in the background, but the rest of the page is shown with no transparency or fading in at all.

    But why??
    Because some elements have a position: relative; or position: absolute; in their styling...

    Huh? But what does position has to do with opacity anyway?
    I don't really know.

    The solution is somewhat simple though, but not too attractive if you have a full project already built up. Just remove those position: relative; and position: absolute; and try to rework your main layout the classic way: float, margin and padding.

    And, after an hour or so of removing the CSS position attribute and reworking the layout of the page, it all works fine.
    Even in IE7!!! :D

  • blog comments powered by Disqus