Anyone understand why jQuery does this? Flicker only in Firefox

Here is a link to my problem page. The problem is right at the bottom, where there is a link which says ‘More Site Links’. This link uses jQuery .toggle to show and hide some extra UL LI links.

In Firefox 3.6 (PC only - works fine on the Mac) if you expand the links and then click ‘Less Site Links’ and immediately move your mouse away, the screen sort of flashes and reloads. It works fine on every other browser except this - anyone know why?

The jQuery for the toggle is here (please note, I’m a beginner with jQuery so I’m sure there are better ways to write most of what I have in there!).

There’s quite a bit of other jQuery on the page as you can see from the source but this is the bit handling that particular bit…


$(document).ready(function(){
        $(".linksTrigger").click(function(){
	$(this).toggleClass("switch");
	$(".extraLink").toggle("slow");
	$(this).text($(this).text() == 'More Site Links' ? 'Less Site Links' : 'More Site Links'); 			return false; //Prevent the browser jump to the link anchor
	});
});

So… Any jQuery black=belts know what’s causing it?

I think rather than being a specific JavaScript or jQuery issue, this might be a problem with the browser itself.

What happens is that when you’re collapsing the extra links, the height of the document changes, and it looks like this is causing Firefox to repaint the screen (several times in quick succession, appearing as a flicker).

To test this, head in to Firebug and hide/remove all content until you effectively only have your “siteLinksWrapper group” div on the page, if you hit the more/less link without a scrollbar present, the page will not flicker.

I did just give this a quick try with the jQuery UI Slide Effect and the flickering is a lot less noticeable. (It’s also a bit less noticeable when you change the speed of the effect to, say 100ms).

There are of course other drawbacks to using the jQuery UI effect, least of which is loading a whole extra library just for 1 effect.

Note that if you use toggle without a duration there would only be 1 repaint of the page.

Has anyone else come across this problem? More importantly, know any other solutions to this?

It’s a bug with the Firefox web browser as a whole, relating to when the vertical size of the window changes and the scroll position is near the bottom of the page.