inconsistency in translate3d position

[klaoha06]

if I scroll slowly the css "transfrom: translated3d" is consistent but if i scroll too quickly from bottom to top then the translated3d is different each time .. this makes my divs break and create a white gap or cause unnecessary overlaps between divs.

It should output the same and consistent transform: translate3d value regardless of how fast or slow an user scroll.

[oblador]

Hmm, that might be be due to requestAnimationFrame limiting updates. Not having that problem myself though, what browser and hardware are you using?

[klaoha06]

Chrome, Macbook Pro

[klaoha06]

Same problem for me even in the example page. When I scroll up and down really fast, it is noticeable that first picture or the picture of the towers are not in the same position or same height each time.

[oblador]

Damn, I can't reproduce. I'm using the exact same setup. Even if I cmd-up, it will always be in the same position for me. Using the touchpad will cause a rubber band effect which will make the scrolling ease out. How do you do it? :-)

Because of the possibility to "overscroll" on OSX/iOS I will add some extra pixels as buffer or adjust my parallax function to never go beyond a certain point, see createAnimator min/max arguments.