Internet Explorer 7 issues with jQuery animation and position:relative

Internet Explorer 7 can have issues with rendering jQuery animations if some of the properties that are to be animated have not already been set with CSS, and the containing block has the position property set to “relative”.

What are we trying to achieve?

The example below features an animation effect using jQuery’s slideUp() and slideDown() functions to hide and show the image below the buttons. The same thing can also be achieved using the animate() function which gives more control over exactly what’s being animated.

The code behind the example

The HTML:

<input type="button" id="example-animation-hide" value="Hide" />
<input type="button" id="example-animation-show" value="Show" />
<div id="example-animation">
    <img width="200" height="224" alt="iphone 3g" src="/images/iphone3g.jpg" />
</div>

The jQuery/Javascript:

$('#example-animation-hide').click(function() {
    $('#example-animation').slideUp('medium');
});
$('#example-animation-show').click(function() {
    $('#example-animation').slideDown('medium');
});

The Internet Explorer 7 problem

When I first used a variation of the above in a site I was setting up, IE7 would hide the div perfectly well, but after when doing the the slideDown() animation it would appear as expected but would then disappear, leaving a blank space where it should have been.

Oddly enough, this problem didn’t occur in IE6 and the animations work perfectly well in IE8 and other browsers.

It turns out that IE7 seems to have an issue animating things if the property to be animated doesn’t already have a CSS value set and the containing div has the position property set to “relative”. In this instance, the height of the div is being animated from its current height to 0, and then back from 0 to the original height.

Because I hadn’t specified the height of the div in the stylesheet, IE7 had issues trying to animated the height back to its original size.

The solution was to simply add height of the div into the stylesheet:

#example-animation {
    height: 224px;
}

This isn’t an ideal solution, especially since the height of the div may vary depending on the content. Since we’re using jQuery anyway, we can use the height() function to dynamically work the height out and set it into the CSS before the animation.

Note that I’ve set the height each time the animation is called; this is in case its height has changed between hiding and showing (and hiding again) if the user resizes their browser.

function setHeight(which) {
    var div = $(which);
    div.css({height: div.height()});
}
$('#example-animation-hide').click(function() {
    setHeight('#example-animation');
    $('#example-animation').slideUp('medium');
});
$('#example-animation-show').click(function() {
    setHeight('#example-animation');
    $('#example-animation').slideDown('medium');
});

This makes the animation now work as expected in Internet Explorer 7.

A final note

IE7 handles the animations fine if the container’s position is not relative. So you will probably only have issues if “position: relative” is in one of the element’s parents. If this situation does not apply, then there should be no need to set the height.