jQuery SlideDown Flickering in Firefox

Question

once more a jQuery, Firefox flickering issue. (no flickering in IE6/7/8, Safari)

I uploaded an example page here: http://sithlord.bplaced.net/testing/jquery_flickering/flickering.html

There are two div containers. The inner div is the one I'm hiding. The outer one is the wraping container with the style elements. I found the flicker only occur with the selectbox. Without the SelectBox there is no flickering.

But thats not all: (I cant post a second hyperlink: its the same link as above; only change "flickering.html" to not_flickering.html)

In this case I selected a lower "option" - as you can see, the flicker disappears in this case. The same is happending, when there are less options in total. (less then about 20)

The only workaround I found is deleting the selectbox :)

Any ideas, why this is happening and how to fix it?

Thanks!

Answer 1

I'm a bit late on this, but I ran into a similar problem. My solution: set display:none to the select before the animation, and then display:block after. Example:

 $("div#hidden").hide();
  $("a").click(function(e) {
    e.preventDefault();
    $("div#hidden select").css('display','none');
    $("div#hidden").slideDown(1000);
    $("div#hidden select").css('display','block');
    });
});

You could also use the jquery show/hide functions if you wanted to.

Answer 2

Found this post. Try setting a width or height on the hidden div. I noticed you have no styles on your divs so its possible this may work.

Metropolis

Answer 3

overflow:hidden; applied directly to the containing div works.

Answer 4

Please see http://dev.jquery.com/ticket/5743 why such things are generally possible with jQuery. In short while the css function without parameters claims to only return values without updating anything, it actually updates the DOM in some cases.