JQuery SlideDown Flicker in Firefox

Question

jQuery again, the flickering Firefox issue. (no flickering in IE6 / 7/8, Safari)

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

There are two container divs. The inner div is the one I'm hiding. External is a container for shaking with style elements. I found that flicker only happens with selectbox. Without SelectBox, there is no flicker.

But this is not all: (I can’t post the second hyperlink: its the same link as above, only change "flickering.html" to not_flickering.html)

In this case, I chose a lower “option” - as you can see, the flicker disappears in this case. The same thing happens when there are generally fewer options. (less than about 20)

The only workaround I found is to remove selectbox :)

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

Thanks!

Answer 1

overflow: hidden; applies directly to divs containing works.

Answer 2

Found this post . Try setting the width or height of the hidden div. I noticed that you have no styles on your divs, so it is possible that this might work.

Metropolis

Answer 3

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

Answer 4

I'm a little late for this, but I had a similar problem. My solution: set display: none to select before 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 can also use show / hide jquery functions if you want.