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
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.
Hey @mathias_muller, here are all the open issues with the ‘scroll’ label on them:
Mainly, there are two things to look at:
Go deep with performance on android 4.0-4.3 (and try some weird things out)
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).
@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.
@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.
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.
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.
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).
@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.
