Issue with collection-repeat: choppy perf & no inertia when scrolling

ionic-v1
#1

Anyone else running into issues with this?

I have a $ionicModal that I launch from an ion-side-menu to let the user select from a large list (~800 items) for a particular setting. I’m seeing two issues with my implementation:

  1. Scrolling is a little choppy, feels like maybe 10fps
  2. There isn’t any inertia. If I ‘fling’ the list, it stops as soon as my finger leaves the screen.

I’m running on:
iPhone 5S running iOS 8
Ionic framework version 1.0.0-beta.12

Annnnnd here’s my code:

<script id="change-group.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <button class="button button-clear button-energized icon-right ion-chevron-left" ng-click="model.doChangeGroup()"></button>
      <h1 class="title">Choose Group</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item class="item-stable item-icon-right collection-repeat-item"
                  collection-repeat="group in model.groups track by group.id"
                  collection-item-width="'100%'"
                  collection-item-height="52"
                  style="height: 52px;"
                  ng-click="model.selectGroup(group)">
          {{ group.name }}
          <i class="icon icon-energized ion-ios7-checkmark-empty" ng-show="group.selected"></i>
        </ion-item>
      </ion-list>
    </ion>
  </ion-modal-view>
</script>

And my CSS to set widths looks like:

.collection-repeat-item {
    border-top-width: 0;
    left: 0;
    right: 0;
}

Thanks!
Mike

1 Like
#2

Having exact same issues. Very choppy and hit or miss with the inertia.

Mine is just a list of less than 100.

<div collection-repeat="action in actions | filter:{category : actionFilter} track by $index" collection-item-height="365" collection-item-width="'100%'">

-Travis

#3

Bump… Anyone from the Ionic team looking into this? This appears to be the associated tracked issue on GitHub:

1 Like
#4

I have the same issue. I’ve gone back and forth between ng-repeat and collection-repeat. Both have choppy performance. I also made sure that my inline thumbs were already resized so that they didn’t need to be resized on the fly. Still having issues.

#5

I have the same problem. Displaying the list with ng-repeat scrolls with inertia. Changing to collection-repeat causes the list to stop scrolling as soon as you release. This makes it very hard to scroll through a long list and makes the performance seem very slow (since it feels like the list is sticking)

#6

I am experiencing the no-inertia issue as well with collection repeat on beta 13. Also when I attempt to dynamically load pngs with alpha channels there is an image swapping/flicker when the images are loaded locally. I cannot reproduce the issue when loading the same images from a remote source(see here link). If I setup a simple example I cannot duplicate either issue see code pen here. For me the no-inertia issue occurs when the collection repeat is embedded in a custom directive that is Element restricted.

#7

I have the same issue. After some researches i found that jquery is the problem but I can’t say why. The solution is to load jquery after ionic.
hope this help.

1 Like
Collection Repeat performance on Android
#8

I don’t get it but this helped. Added ionic as a dependency of jquery in our webpack config and performance on collection-repeat improved greatly. I have been switching all my list items over to be simple watches and as performant as possible, but this was the trick.

        {
            test: /[\/\\]jquery\.(\.min)?\.js$/,
            loader: 'imports?ionic'
        },