示例
首先，这是我的代码和问题： http:
//www.nathanstpierre.com/MBX/showoff.html
问题
所以我看到的是，当您单击左侧的按钮时，窗口会滚动到相应的标题。在除 Firefox 之外的所有浏览器中（包括... IE gasp），这都非常流畅。但是，如果您降低窗口的高度，它会在所有计算机上变得平滑。我已经在多台计算机和 IE 7-8、Google Chrome、Safari 和 Firefox 3.5 上尝试过这个。我已经消除了页面上的每一点图形和颜色，所以这些都不是问题。我已经摆脱了跟随你的侧边栏，不是这样。
理论
我认为 jQuery 缓动插件会计算你需要走的距离，然后除以指定的每单位持续时间需要移动的像素数（比如 30 毫秒内 300 像素，所以 10 像素/毫秒） . 其他所有浏览器似乎都可以使这个平滑过渡，但也许是窗口滚动事件提供的粒度没有压缩到足以让 Firefox 使它看起来平滑？或者我使用了错误的缓动插件，或者错误的设置。
编码
$("#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;
});
逻辑
为 sidenav onClick 上的每个 a 标签添加一个事件侦听器。这将获取文档中与该链接的 href 属性具有相同 ID 的元素的 offset().top，然后从当前的 scrollTop 动画到该元素的 offset().top。逻辑是合理的，并且在除 Firefox 之外的所有浏览器中都能顺利运行......据我所知。
认罪
我究竟做错了什么？这是一个错误吗？
谢谢！
更新
好吧，我不能凭良心选择这里提供的任何答案，因为他们都没有真正解决这个问题，所以如果你遵循这个选择你最喜欢的，赏金将去最高的那个票。
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.