search

pqina / flip

⏳ The online version of the classic flip clock
https://pqina.nl/flip/
MIT License
874 stars 89 forks source link

Animation problem in mobile #64

Open romanmuska opened 11 months ago

romanmuska commented 11 months ago

Hi,

we noticed a problem of flip animation in mobile devices. When we open it on iOS or any android device we see that sometimes just whole number is revealed and sometimes it flip nicely step by step to final value. Can you please check where can be a problem or how to fix it? ... It is doing also with your preset demo. The only change in our code is that we waiting to intersect window flipper after scroll and then set it on that value. But it also do that when we just put there the preset demo code, so i don't think that it is cause by that observer. Desktop is fine on all browsers and it works perfecly. I also attached video showing the problem. This problem occurs randomly.

https://github.com/pqina/flip/assets/17880823/4de3dab4-dc88-4f68-bf58-3c85f60f8850

Thanks for you help.

rikschennink commented 11 months ago

Does this happen on https://pqina.nl/flip?

romanmuska commented 10 months ago

No it doesn't because it is already in a viewport. This happens to us only when we scroll down and set value when element is visible. If you need i can send you page and also code to simulate it.

rikschennink commented 10 months ago

If you can reproduce it in a codepen or on stackblitz I'm happy to take a look.

romanmuska commented 10 months ago

Hi i cannot simulate it on stackblitz because they have some integrated light browser which is opened in different way on mobile but i put the simulated version on https://flip.rootscope.co where you can try it (please preview it on mobile because error happens only there) and don't forget to scroll page down, because flipper is under init viewport. I send you also the code to simulate it: https://stackblitz.com/edit/js-h36mqc