as stated, I have a problem with the fluidity of my page and I think jquery is in some way involved.
I created the following one-page-site.
http://cgeese.de/tests/Test02/
I use jQuery with the js plugins
Problem
Clicking a link scrolls the page to the target div with a bounce ease (supplied by easing.js). It technically works fine, but it's not smooth enough for my taste.
I think the problem with the stutter in the easing is me misusing one of these plugins but I cannot seem to find a mistake in the code.
Questions
WHY is the animation stuttering and how can I make it smoother?
Update Any clues at all? Seems like using the jQuery-build-in easing looks a bit better, but has the same issue. So I guess it's not the easing-plugin, which leaves Ariel Feslers stuff. Is there any plugin like his?
It appears pretty fluid on chrome. Changing the easing type will not change much...
Your navigation is Position: fixed, what is causing a repaint/reflow of the whole page for every navigation key frame. you can visualize this with chrome canary or with this trick: http://paulirish.com/2011/viewing-chromes-paint-cycle/
Animating the scroll also triggers a repaint. Also remove as much CSS3 shadows and gradients as you can, they are pretty hard to animate for the browser.
I think there is a plugin for firefox to.
You could optimize this my setting it position: absolute, and placing your content inside a div that is overflow hidden... (some kind of fake body)
Here is an excellent article about it: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
The other thing you could do is not animating the scroll but the elements it self, place them in a absolute positioned element, and animate this element.
Some general guidelines about repaints/reflows: https://developers.google.com/speed/articles/reflow