jQuery easing animation of window scroll in Firefox (bug or my bad?)_问答_开发者

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 thi开发者_Python百科s 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.

The poor performance seems to be caused by the -moz-box-shadow property, if you remove any declarations of this property (or disable them with Firebug) the scrolling animation is much smoother.

Please try jQuery 1.4. That seems the be much faster, then jQuery 1.3.2.

If you need to debug these kind of things, put the uncompressed js files in your code and use Firebug with it's profile, to profile the functions.

You page is a bit heavy with the two backgrounds (one being a transparent .png ..)

The issue is with firefox and/or you machine handling the animation. Check the smooth scrolling option of Firefox ( Tools -> Options -> Advanced -> General -> Use Smooth Scrolling ). It might be the reason if it is checked off...

whenever i have attempted a similar effect i have used ScrollTo. maybe that will help

ScrollTo Plugin

I've had the same problem with FF 3.5 - definitely looks like a rendering problem. If you try it new 3.6 it will be probably ok.

I was having issues with doherty's coda slider 2.0 btw.

Regards

Andrej