WIP on Scroll?


#1

Hi Guys,
I’ve seen a lot of scroll related commits upcoming for next release.
Is it a strong focus for the next release ?
As you know scrolling jerks lists in webview ( especially on android) are show stopper for our beloved HTML5 app.
I 've tested the ionic seed app just adding 50 rows to the pet service and even on my GS4 (android 4.3) there is weird behavior on list scroll.

Do you think this will be fixed before the beta or it is worth looking for other solution for scrolling issue.
Thanks,
Regards


#2

Yes we’re seeing the same issues too, especially with Android. @andytjoslin has been doing some awesome work in that area, but we’ve got more ideas to implement to improve performance. Don’t worry, we’re not considering it done yet.


#3

Hey @mathias_muller, here are all the open issues with the ‘scroll’ label on them:

Mainly, there are two things to look at:

  1. Go deep with performance on android 4.0-4.3 (and try some weird things out)
  2. Finish and polish ion-repeat or ion-virtual-repeat or the like, which has virtual scrolling built in (so if you have 100 items, it will only render {numberOfItemsVisibleOnScreen} dom nodes).

#4

Thanks guys for taking on your time to reply.
Will test and give you feedback


#5

@andy, some progress on this issue?


#6

@juliancesar Have you checked out Collection Repeat? It’s what Andy was talking about when he mentioned ion-virtual-repeat. It’s been in Ionic for a couple of versions now and apart from one small visual issue on iOS it is already useable and works great.

Andy also just pushed an update to Collection Repeat which will make performance even better. It looks like it will be in the nightlies soon.

http://ionicframework.com/docs/api/directive/collectionRepeat/


#7

Great! Good Job! Thanks for reply!


#8

@andy Is this meant to be like collectionRepeat, but without the preset height?

I have a long list of paragraphs that vary greatly in size, this would be fantastic! :smile:


#9

@jamespaxi It used to be called ion-virtual-repeat, but it ended up being called Collection Repeat.

Collection Repeat can be used with varying heights. Take a look at the documentation page that I linked to earlier for more information on how to do that.


#10

thanks for the reply :smile:

as far as I can tell the height value is necessary (please point me the right way if it’s not). I’ve tried to come up with a function to determine the height of each, but for now with my current knowledge it’s hard.

The paragraphs are random in size, so the function would have to predict how many rows it would fill. I guess I could manage by using a monospaced font and figuring out how many characters I get per row.

Unfortunately, based on a few triggers an item may expand with more data, and I imagine this may mess up the list.

Any suggestions would be fantastic! :smile:


#11

There are ways to determine the height of an element in Angular- I would imagine you could use these to feed into the getItemHeight function that the example in the Ionic docs use.

Have a look at http://stackoverflow.com/questions/21895732/get-html-element-height-without-jquery-in-angularjs for an example of how you can determine the height of an element with Angular.


#12

@coen_warmer thanks a lot! :smile:

unfortunately getItemHeight has only access to the collection’s item object and the index, the element is created after the heights are collected.


#13

I didn’t have a look at the code yet, but I assume the height is needed to calculate the scrollbars. If so the list could calculate the median of the height of the elements it already rendered and use this as an educated guess. This might cause some issues with “jumping” scrollbars when the height of the elements differs a lot (similiar to what the scrollbar does when inifinite scrolling is used).

But I might be wrong :slight_smile:


#14

@mquadrat, the height of items is needed because Collection Repeat places every item in the list with position absolute. So it needs the height of an item so it can place one item under another with the right offset.

Check out the Collection Repeat example and inspect the list items to see what I mean: http://codepen.io/ionic/pen/mFygh