jQuery slideToggle flicker in Firefox

Question

I have a specific situation with slideToggle that creates a flicker in Firefox.

The situation was when the expanding element goes longer than the page and a vertical scrollbar appears in Firefox.

If you scroll down to read all of the text in the expanding element and then click on the trigger to close the element, Firefox would flash for a second and then the page readjusts and returns to its position before the expanded element was expanded. I have tried adding ‘return false;’ to no avail.

Here's a test page where you can see the effect in FF when you click to close the last item (Herbal Teas): http://pollak-labs.com/clients/birthyourself/?page_id=21

Answer 1

I think the reason this is happening, is because by the item sliding up, the page height is getting shorter. Firefox can't redraw the page, change the height, scroll the viewport up, and animate your element all at the same time.

Here is what I would use to attempt to fix the problem. The potential side effect would be, if they opened all of the boxes and closed them one by one, you would be left with a lot of white space. However, you won't have the flashes on close. You also have the same problem on open if you are scrolled to the very bottom of the page. The $('html,body') scroll line addresses that:

$(".question").click(function(){
 var $animator = $(this).next(".answer"),
     $post     = $animator.closest('.post');
 if($animator.is(':visible')){
  $post.css('min-height', $post.height());
  $animator.slideUp("slow");
 } else {
  $('html, body').scrollTop($('html, body').scrollTop() - 1);
  $animator.slideDown("slow", function(){
   $post.css('min-height', 0);
  });
 }
});

Answer 2

jQuery tries to do too many things at the same time, and in the process, it is cutting corners, doing illegal things. For example, while getting the dimensions of an element, it actually updates it. It is not a bug in FireFox, it is a bug in jQuery. You can see it here:

Firefox: Showing hidden Element containing scrollable Content causes Page Flicker

When you study it, you will discover a few things that might help you in eliminating your problem entirely, possibly by overriding jQuery behavior. Or just file another bug :)

Answer 3

Yes, Doug Neiner's "hack" solved my flicker problem in Firefox and IE6 but created another issue in Safari, so I have changed it to:

$('html').scrollTop($('html').scrollTop()-1);

Now it works perfectly in all browsers.