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

Question

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

问题
所以我看到的是，当您单击左侧的按钮时，窗口会滚动到适当的标题。在除 Firefox 之外的所有浏览器中（包括...IE 喘气）这非常顺利。但是，如果减小窗口的高度，它在所有计算机上都会变得平滑。我已经在多台计算机以及 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;
      });

逻辑

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

抗辩

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

谢谢！

更新

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

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

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

具有透明度
没有透明度

编辑：那么问题已经有了答案，但现在我无法选择。有人知道这是怎么回事吗？

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

Answer 1

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

Answer 2

请尝试 jQuery 1.4。这看起来比 jQuery 1.3.2 快得多。

如果您需要调试此类内容，请将未压缩的 js 文件放入您的代码中，并使用 Firebug 及其配置文件来分析功能。

Answer 3

你的页面有两个背景，有点重（一个是透明的.png ..）

问题出在 Firefox 和/或处理动画的机器上。检查 Firefox 的平滑滚动选项（ 工具 -> 选项 -> 高级 -> 常规 -> 使用平滑滚动 ）。如果检查过的话可能是这个原因...

Answer 4

每当我尝试类似的效果时，我都会使用 ScrollTo。也许这会有所帮助

滚动到插件

Answer 5

我在 FF 3.5 中遇到了同样的问题 - 看起来绝对是渲染问题。如果你尝试一下新的 3.6 可能会没问题。

顺便说一句，我在使用 doherty 的 coda slider 2.0 时遇到了问题。

问候

安德烈