JQuery slideDown in IE9 - content disappears after animation finishes

Question

I had this problem twice on two different sites. It works in all browsers except IE9.

I have a div that opens and closes with jQuery slideup and slideDown (the same problem occurs with slideToggle). I can see the contents of the div when it slides down, but as soon as the animation stops, the content disappears.

Here is 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, just make a simple show / hide, it works fine, but I would like to keep the effect of opening it.

Answer 1

The honest offer is not corrected here, report it as an error for the IE9 team , but don’t waste time fixing your error.

This should be fixed in the IE9 finale, and the end result will just be a waste of development time at your end ... the beta version of the buggy, they have always been wrong and will always be wrong ... they will not be beta otherwise.

Answer 2

2 thumbs up with Nick's answer.

But by the time the IE team solves the problem, you are likely to be in another project.

Here is what worked for me with IE7, which will certainly work on IE9.

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

overflow: hidden; 

Good day!

Answer 3

I noticed that this happens on iPad iOS version 5.0 in mobile Safari. position:relative is the culprit of all elements of the list item. overflow:hidden fixes this, however it does not help if you have a 3rd level navigation. No workaround is known, except for changing slideToggle to showToggle .

Answer 4

There is another solution which is to add .css('zoom') to the jQuery chain.

Answer 5

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

zoom: 1;