Jumps while scrolling to top in Ionic project

[misterdev]

I'm developing a chat app using Ionic 1.3.1, the same code works perfectly on desktop browsers but has problems on real devices (android 6.0.1/ios 10.3.2), that's why I think this is a ui-scroll bug.

No matter which values I use for buffer-size and padding, when I reach the top element in the buffer (eg. index -40) it loads buffer_size elements and jumps to the new top element (e.g. index -60) then loads other buffer_size elements correctly.

Also, when I set the same height to every element, works fine on ios, but this is not a possible solution since every message may have different heights.

I don't have enough time to provide a repro, can you please give some tips on what I can look at to try to solve this?

PS: Thanks for developing this, switching from ng-repeat to ui-scroll has improved performance hugely!

[dhilt]

@misterdev I have spent time and set up the Ionic environment. I followed this official guide. I've injected latest ui-scroll (v1.6.1) into the app, build simple controller and run it locally in my Chrome browser (Win 10 desktop). And I didn't see any issues. What am I doing wrong?

Also I want to attach a link to my test project, maybe this may help! please download it and try to run it on your end.

[misterdev]

@dhilt this issue happens only when running on mobile devices (tested on android 6.0.1/ios 10.3.2).

You can find the instructions here.

1. Add the platform using ionic platform add android or ios
2. Connect the device via USB then run ionic run android --device or ionic run ios --device depending on the platform.
   For Android you may need to run adb devices before ionic run to boot adb.

BTW Thanks a lot for your help! I'm going to test this and let you know

[misterdev]

I've edited and uploaded your code here.

This works perfectly on chrome desktop but fails on my android device.

Also, it seems to work if I set the same height to every element in css height: 100px, but fails if I set it using ng-stye="{'height': '100px'}"

[dhilt]

@misterdev Good news (not sure we should be happy): I was able to reproduce the issue on my Android device. Let's think what could be done.

[misterdev]

@dhilt Nice to know this is actually an issue. I'm going to work on fixing this in my app next week, do you have any tip on which could be the cause or what to look at?
I can submit a PR If I'll find a good solution.

Also, on mobile devices ui-scroll is slightly less performant because of forced reflows, but I don't know if it is possible to do something on this.

[dhilt]

@misterdev I'm working in a separate branch and looks like I'm prety close to the issue resolving. May I ask you to try a pre-build https://github.com/angular-ui/ui-scroll/blob/interpolation/dist/ui-scroll.js?

[dhilt]

@misterdev I've finished it. You were right, the problem was in the ui-scroll core and I was able to reproduce the issue on the desktop... Since I've covered my changes with tests, I can say that this fix will be in a nearest (1.6.2) release. Meanwhile, you may try the branch code: https://github.com/angular-ui/ui-scroll/tree/interpolation/dist

[misterdev]

@dhilt That's great, thank you! I can see it is improved.

I still have some problems:

1. I experience the bug described in the first message, 10% of the times
2. When scrolling to bottom it flashes before loading new items
3. When scrolling in any direction, there's a moment when the scroll freezes to load new items. If I scroll during that time it actually scrolls after loading new items, causing a jump

I hope I explained it well, I'll try to replicate these on your test project this later and let you know.

[robertdempsey]

@dhilt The symptoms @misterdev is describing seem similar to those I've mentioned in #160. Possibly related?

[dhilt]

@robertdempsey Hmm... It was realy hard to reproduce it on a desktop (this is why I asked you for a repro), but now I see some correlation... By the way, could you also try this pre-fix: https://github.com/angular-ui/ui-scroll/tree/interpolation/dist – does it solve your issue?

@misterdev Let's separate performance problems (freezing/flashing) and the initial problem (upward jumping). Following you, I've made a repo, where I have uploaded old 1.6.1 and new pre1.6.2 versions of the ui.scroll module (https://github.com/dhilt/ui-scroll-ionic/tree/master/www/lib/ionic/js/angular-ui – I set it here). I tried both of them on my device, and my little investigation showed me that a) both versions have similar performance params; b) new version has no jumping issue, while the old one does.

I have to say, I continue the code refactoring, maybe 1.6.2 will be more complex.

[misterdev]

@dhilt I'm not able to reproduce the initial problem in your test app, but it happens if I use the same code inside my app. I'll have to refactor my code and test it again. Thank you!

[dhilt]

@misterdev Good luck! and tell the results, the issue should be closed once.

I've just started new branch, looks like this may improve performance a bit cause the result code produces less digest cycles then it was before. Not sure it could be noticed in common case, but you also may try the distributive: https://github.com/angular-ui/ui-scroll/tree/sync/dist