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.

Height

Did you file a bug or look for a bug on the jQuery bug tracker? Remember that IE9 is still in preview mode, it is like saying something is broken in a webkit nightly. Now I am hungry for nuts. – Joris

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.

Yacketyyak

+1. I just checked and this isn't fixed in Prev 6. The jQuery docs actually suffer from a similar issue, which I reported about a week before Prev 6 was released. Hopefully, it will be fixed in Prev 7 or Beta 2. – Nonsectarian

Thanks, Nick. I reported it as a bug, ID 619034 – Height

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!

Hydropathy

I'm working with IE9 final and all updates, and this is still broken. Your fix worked for me, and I really appreciate it. – Limit

Thanks bro... overflow: hidden; rocked an IE7 error I was having with the .slideToggle() – Zeeba

MAGIC, worked for me. Otherwise I was having a quick fix in my js so after the animation I had $this.hide().show(); to solve the problem – Gauhati

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.

Saks

Answer 4

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

Fast

Answer 5

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

zoom: 1;

Gawain