Scrolling is jittery

[aresnick]

But the smooth scrolling of the timeline in the second half of the screen isn't working, even very slow scrolling is obviously jittery in Google Chrome 32.0.1700.102 on Mac OS X.

I think it has something to do with the fact that the nav contains multiple li's, because when I take out the li's, the nav scrolls smoothly.

I'd like to have a pure JS/CSS solution but haven't had much success debugging it. I've posted the question with more details and explication over at StackOverflow.

[august-schlubach]

Seems to be the overhead of the saturate webkit effect. I was able to solve this locally by forcing hardware acceleration in the CSS file lines 49-53:

/* Applied to the active panel */
nav#timeline li:hover {
-webkit-filter: saturate(0);
-webkit-transform: translate3d(0, 0, 0);
}

[aresnick]

Oh awesome debugging; thanks! Bakhtiar found an additional solution which feels like a bit less of a workaround but addresses the same underlying issue: requestAnimationFrame. I think we'll implement that--

And thanks again for the extemporaneous lecture =)