search

HubSpot / odometer

Smoothly transitions numbers with ease. #hubspot-open-source
http://github.hubspot.com/odometer/docs/welcome
MIT License
7.31k stars 716 forks source link

Least digit position wrong behavior #97

Open ghost opened 9 years ago

ghost commented 9 years ago

The issue occur simetimes while odometer value is increased. The least significant digit is increased by 1 when reels are stopped. When they farther start rotating the digit replaced with that it should be. E.g.

  1. Value = 10.05, odometer rotates to this value, then it is stopped and last digit replaced and we have 10.06 displayed.
  2. On start rotating value replaced with 10.05 and reels begin rotating.
ghost commented 9 years ago

I made an example that reprocudes the issue http://jsfiddle.net/vdLe9y95/7/. Just look at page about minute and you will see what I'm talking about. It appears enough often. Also I shortly investigated this, I only was able to produce the issue if initialize odometer with some kind of round value, like 10000, 5000, 1000. If I setup it with 12345, the issue disappears.

adamschwartz commented 9 years ago

The issue here is related to the various timing things going on. The JS options duration is set to 3 seconds, the CSS transition duration is still set to the default of 2 seconds, and the refresh function self-calling setTimeout occurs ever 5 seconds. Since these are misaligned in a timeline (and the timing of JS and CSS transitions are not guaranteed to be in sync with each other), this animation will definitely have some issues.