jQuery fadeIn and fadeOut: IE bug workaround

September 26, 2011


This post was originally published in the Rambling Labs Blog on September 26, 2011.


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