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.
window.scrollevent you are attempting to fade your "top" link either in or out. When you click one of your links or otherwise scroll the page Firefox will fire multiplewindow.scrollevents. If the link is currently visible then I don't think jQuery will queue additional fade up animations, but when it's hidden you are ending up with multiple fade in animations queued. – Literatim