Firefox jquery scrollTo flicker error

Question

I saw quite a few threads talking about flickering in Firefox, but none of them describe the problem that I have.

I have a horizontal scroll website, a fixed position menu and a jquery.scrollTo plugin to handle the next and previous buttons. This works fine in Chrome and Safari (I don’t know about IE), but in Firefox there is a flicker every time you scroll left to the right with arrows in the right and top corner.

See an example here.

I tried to set all the elements that have a fixed position overflowing: auto, but it did nothing. I am not very familiar with JS or Jquery, but I know enough to make a difference. Any help would be greatly appreciated!

Answer 1

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

$(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 #" and animate at the same time.

Answer 2

Right after my comment on the bookmarkability page on the Doug post, the light in my head is on! I hope you can adapt to your script if you need bookmarking

<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;
        }
    });   
});