Scroll momentum on IOS


#1

Hello everyone.

I have a problem with scrolling list areas in an ios app i’m building using Angular/Ionic/Cordova. Basically, there doesn’t appear to be any momentum applied to the scrolling on the lists… which makes them “feel” clunky and sticky.

I’ve played with iScroll 5 beta (which i believe is the foundation for the scrolling in Ionic… and it seems to perform much better than my ionic app…

Just wondering if a) other people have seen the same issue b) anyone wants to point me in the direction of where i might go to fix this…


#2

Hey @soyrex. Are you getting any console errors? It might be something just isn’t wired up correctly. That being said, we are working on moving off of our iScroll base to the Zynga Scroller which seems to perform the best out of all things we’ve tried, so expect better scrolling this week.

You can also use <content overflow-scroll="true"> to use the built in native scrolling, but then you don’t get pull to refresh and some other features we are adding, but should work right now as a quick solution.


#3

hey @max… so… i’m not seeing any console errors… but i’m also not seeing the same level of jumpiness in browser (it’s really only on iOS device and iOS emulator).

I saw the branch for zynga… good plan. i tried it out on my device the other night… it seems to perform pretty well (but then… so does iScroll 5… which leads me to think maybe it’s a bug in how it’s wired up).

I’ll do some more research and keep you posted - in the meantime… what sort of timeframe are you looking at for the zynga scroller?


#4

Tomorrow afternoon it should be in master, assuming nothing gets in the way. Testing over here on both Android and iOS has been really positive, and we’ve improved pull to refresh and stuff. So stay tuned :slight_smile:


#5

Exciting how fast you are moving. Congrats. Will try out new build.


#6

Hey @max! i pulled the latest master down and got the scrolling working in my app… seems to work 1000x better than before.

I have a strange issue that i’m seeing sometimes though. If i have a long list of items (over 50) the iphone 5 (and emulator) appear to stop using retina on the list… v. strange…


#7

I’ve tested the latest version (emulation iOS) and seems to work fine.
Just one quick remark: why doesn’t the content have padding at the end like it has at the start? Content just stops at the edge of the bottom of the screen.


#8

Thanks @MrJean I’ll take a look, could be an oversight. @soyrex glad to hear that. Try the weather starter, that really shows the improvement IMO :slight_smile: As for the retina thing, are you noticing specific rendering things that are changing as you scroll?


#9

@soyrex hey, I pushed a fix for the retina thing last night. It seemed to be an issue with -webkit-perspective: 1000 which was recommended for some performance improvements but doesn’t really appear to do much beyond mess up rendering :slight_smile:


#10

hey @max. nice catch. works like a charm… interesting it seems the -webkit-perspective css is almost triggering it into non-retina… and doing nothing else.
I GUESS this probably would help performance on a massive list… but i can’t imagine it would ever be desirable.


#11

Yea, and in the future we want to have virtual list optimizations that would hopefully keep the list rendering to a small subset of the actual list. That’s on the roadmap!


#12

Yea, and in the future we want to have virtual list optimizations that would hopefully keep the list rendering to a small subset of the actual list. That’s on the roadmap!

I’d be interested in helping out with this. We’ve been through a few implementations involving custom directives and ng-if, ftscroller, native scrolling, etc. I was thinking about working on something with ng-repeat and the track by property to switch data between items, without the need to create/remove dom elements. If you guys have any progress in this area I’ve love to get involved where I can.


#13

Hey @wedgybo, that would be awesome. We did start on it, but with the new scroll system the work in that virtual list branch is probably no longer relevant.

I was looking at some examples to see if we could incorporate them:

http://allaud.github.io/quick-ng-repeat/
http://emberjs.com/list-view/
http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/

In theory, it’s simple. But when you start to think about keeping the databinding and all of that, it’s a bit more complicated.

Let’s continue the discussion on the issue here: https://github.com/driftyco/ionic/issues/65