Firefox 中的 jQuery 缓动窗口滚动动画(bug 还是我的错？)

Question

例子
首先也是最重要的，这是我的代码和问题:
http://www.nathanstpierre.com/MBX/showoff.html

问题
所以我看到的是，当您单击左侧的按钮时，窗口会滚动到适当的标题。在除 Firefox 之外的所有浏览器中(包括... IE gasp)，这都非常顺利。但是，如果减小窗口的高度，它在所有计算机上都会变得平滑。我已经在多台计算机以及 IE 7-8、Google Chrome、Safari 和 Firefox 3.5 上尝试过此操作。我已经消除了页面上的所有图形和颜色，所以这些不是问题。我已经去掉了跟随你的侧边栏，不是这样。

理论
我认为 jQuery 缓动插件会计算您需要移动的距离，然后除以指定的每单位持续时间需要移动的像素数(例如 30 毫秒内移动 300 个像素，即 10px/ms)。其他所有浏览器似乎都能够实现平滑过渡，但也许窗口滚动事件提供的粒度压缩程度不足以让 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;
      });

逻辑

为侧导航 onClick 上的每个 a 标记添加一个事件监听器。这将获取文档中与该链接的 href 属性具有相同 ID 的元素的 offset().top，然后从当前的滚动顶部到该元素的 offset().top 进行动画处理。据我所知，逻辑是合理的，并且在除 Firefox 之外的所有浏览器中都能顺利运行。

抗辩

我做错了什么？这是一个错误吗？

谢谢!

更新

好吧，我不能凭良心选择这里提供的任何答案，因为他们都没有真正解决这个问题，所以如果你遵循这个选择你最喜欢的，赏金将给予那个人获得最高票数。

问题似乎在于 Firefox a) 呈现透明度和 b) 处理滚动事件的方式。如果有足够的处理器能力，这可能不是问题，但让我难过的是 IE(在所有浏览器中)能够在劣质硬件上渲染出这样的效果。我将就这个问题与 Mozilla 联系，看看他们是否对此有什么要说的。

为了获得额外的启发，免费提供以下内容:

With Transparency
Without Transparency

编辑:所以问题已经得到解答，但现在我无法选择它。有人知道这是怎么回事吗？

最终更新已经过去了足够的时间，他们让我拿回了赏金，所以我选择了正确的答案。它看起来像 box-shadow 和其他一些效果由于它们的渲染方式而导致 Firefox 中出现一些滚动问题。 FF 4.0+ 可以更好地处理这个问题，但某些计算机仍然存在问题。对于实现 CSS3 的人来说，这是一个很好的提示:在所有浏览器上测试交互，看看性能成本是否合理。

Answer 1

性能不佳似乎是由 -moz-box-shadow 属性引起的，如果删除此属性的任何声明(或使用 Firebug 禁用它们)，滚动动画会更加平滑。