Firefox jquery scrollTo flicker bug

Question

I've seen quite a few threads here talking about flickering in Firefox, but none that quite describe the problem I'm having.

I've got a horizontal scrolling website, fixed position menus, and the jquery plugin .scrollTo handling next and previous buttons. This works great in Chrome and Safari (don't know about IE), but in Firefox there is a flicker every time you scroll right of left with the arrows in the upper right and corner.

See An Example Here

I've tried setting all the elements that have a fixed position to overflow:auto but that did nothing. I'm not super familiar with with JS or Jquery but I know enough to change things. Any help would be greatly appreciated!

Answer 1

The problem is that you are not cancelling the default browser action in your click function. Change your code to this, and the flicker will go away:

$(function(){
    $(".next").click(function(e) {
        $.scrollTo( '+=1000px', 600 );
        e.preventDefault();
    });
    $(".prev").click(function(e) {
        $.scrollTo( '-=1000px', 600 );
        e.preventDefault();
    });
});

Firefox is trying to "scroll to the #" and animate at the same time.

Answer 2

Hmmm... I seem to be having a similar problem without quite as much exciting jQuery involved.

www.thebeverley.com

Simple toggle that expands fine but flickers on collapse if I scroll down a little first. seems only in FF 3.5.7 (mac) - works as expected in Safari. Have tried various overflow:hidden permutations on #main id, and removed href # completely now. Still no joy.

Am I missing something or can someone point me in the right direction perhaps?

Many thanks, D