search

oblador / angular-parallax

Lightweight & performant parallax scrolling for angular.js.
http://oblador.github.io/angular-parallax/
MIT License
203 stars 44 forks source link

inconsistency in translate3d position #22

Open klaoha06 opened 9 years ago

klaoha06 commented 9 years ago

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 commented 9 years ago

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

klaoha06 commented 9 years ago

Chrome, Macbook Pro

klaoha06 commented 9 years ago

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 commented 9 years ago

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.