inconsistency in translate3d position
klaoha06 opened this issue · comments
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.
Hmm, that might be be due to requestAnimationFrame limiting updates. Not having that problem myself though, what browser and hardware are you using?
Chrome, Macbook Pro
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.
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.