Question

THE EXAMPLE
First and foremost, here’s my code and problem:
http://www.nathanstpierre.com/MBX/showoff.html

THE ISSUE
So what I’m seeing is when you click the buttons on the left, the window scrolls to the appropriate heading. In every browser but Firefox (including… IE gasp) this is very smooth. However, if you reduce the height of the window, it becomes smooth on all computers. I’ve already tried this on multiple computers and on IE 7-8, Google Chrome, Safari, and Firefox 3.5. I’ve eliminated every bit of graphic and color on the page, so those aren’t the issue. I’ve gotten rid of the sidebar that follows you, that’s not it.

THE THEORY
I think that the jQuery easing plugin calculates the distance that you’re needing to go, and then divides up the number of pixels it needs to move per unit of duration specified (say 300 pixels over 30 milliseconds, so 10px/ms). Every other browser seems to be able to make this a smooth transition, but maybe the granularity provided by the window scroll event is not compressed enough for Firefox to make this appear smooth? Or maybe I’m using the wrong easing plugin, or the wrong settings.

THE CODE

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

THE LOGIC

Add an event listener to each a tag on the sidenav onClick. This will get the offset().top of the element in the document with the same ID as the href attribute of that link, and then animate from the current scrollTop to the offset().top of that element. The logic is sound, and works smoothly in every browser EXCEPT Firefox… as far as I can tell.

THE PLEA

What am I doing wrong? Is this a bug?

Thanks!

THE UPDATE

Well I can’t in good conscience choose any of the answers presented here, as none of them have actually given a resolution to the issue, so if you’re following this pick your favorite and the bounty will go to the one with the highest votes.

The issue appears to be the way that Firefox a) renders transparency and b) deals with scrolling events. Potentially with enough processor power this is a non-issue, but what makes me sad is that IE (of all browsers) is capable of rendering this fine on inferior hardware. I’ll approach Mozilla with the issue and see if they’ve got anything to say about it.

For extra edification, the following are provided at no charge:

With Transparency
Without Transparency

EDIT: So the question has been answered, but now I can’t choose it. Anyone know what’s up with that?

FINAL UPDATE
Enough time had passed that they let me have the bounty back, so I chose the answer that was correct. It looks like box-shadow and a few other effects cause some scrolling issues in firefox because of the way they render. FF 4.0 + handles this better, but some computers still have issues. This is a great heads up for people implementing CSS3: test the interaction on all browsers and see if the performance costs are justifiable.

Answer 1

The poor performance seems to be caused by the -moz-box-shadow property, if you remove any declarations of this property (or disable them with Firebug) the scrolling animation is much smoother.