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

发布于 2024-08-18 23:58:29 字数 2036 浏览 10 评论 0原文

例子
首先也是最重要的，这是我的代码和问题：
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;
      });

逻辑

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

申诉

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

谢谢！

更新

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

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

如需额外的启发，免费提供以下内容：

透明
 没有透明度

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

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

原文

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.

分享到QQ

分享到微博