jQuery slideDown in IE9 - content disappears after animation finishes

Question

I've had this problem twice on two different sites. It works in all browsers other than IE9.

I have a div being opened and closed using jquery slideup and slideDown (the same problem happens with slideToggle). I'm able to see the content of the div as it slides down, but as soon as the animation stops, the content disappears.

Heres an example of this problem http://www.ohnuts.com/searchResults.cfm?criteria=cashews&search=all click on the "more categories" link.

Has anyone else experienced this problem, and are there any workarounds? I can change it to just do a simple show/hide, that works fine, but i'd like to keep the effect of it opening.

Answer 1

Honest suggestion here, don't fix it, report it as a bug to the IE9 team but don't spend any time fixing their bug.

This should be fixed in IE9 final, and the end result will just be wasted development time on your end...betas are buggy, they've always been buggy and will always be buggy...they wouldn't be called betas otherwise.

Answer 2

2 thumbs up with Nick's answer.

But by the time IE team will solve the problem, you will probably be on another project.

Here is what worked for me with IE7 that will certainly works on IE9.

On the DIV you set a slideDown effect, add this to your CSS:

 overflow: hidden;

Good day!

Answer 3

I've noticed that this happens on iPad iOS ver 5.0 in mobile Safari. position:relative is the culprit on all list item elements. overflow:hidden does fix this, however this does not help if you have a 3rd tier of navigation. No known workaround except change the slideToggle to showToggle.

Answer 4

There is also one more solution to this, which is to add .css('zoom') to the jQuery chain.

Answer 5

I had the same problem with IE, and I added to the css of the sliding element the following code:

zoom: 1;