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

Right after my comment on page bookmarkability on Doug's post, the light in my head turned on! Hope you can adapt to your script, if you need bookmarkability

<a href="#gohere" class="mylink">Click</a>
...

$('.mylink').click(function(e) {
    e.preventDefault();
    var anchor = $(this).attr('href');
    $.scrollTo(anchor, 1000, {
        onAfter: function(){
          location.hash = anchor;
        }
    });   
});