Ionic 3.0.0-beta.3 (&ionic2) scrolling issues on iOS simulator/device

ionic-v1
1

Hey guys, I decided to give ionic a try and loving it. I have noticed a issue with scrolling that occurs only on iOS emulator. Everything works great in ‘labs’/browser (safari and chrome) and even on Android emulator and device.

What I am trying to do: Have and on the same page. Simply, refresher on top to pull and get new items and infinite scroll to get the old.

There are 2 issues I am seeing (only on iOS emulator):

  1. ion-infinite-scroll does not fire ionInfinite events if the initial list covers the entire screen. If the screen is covered by enough items and user scrolls down; there is no event fired (I have played around with threshold but no luck). However, when the initial items are not enough to cover the entire screen then ionInfinite gets fired on scroll but only until the screen is full and then it stops to fire no matter how much you try to scroll…
    I have also done another test where I increased the threshold to a very high value like 1000px or 500%… in which case ionInfinite event gets fired even if the items cover the screen, however it stops the moment it covers 500% in this example.

  2. ion-refresher work great on its own. But if I add ion-refresher together with ion-infinite-scroll then the scrolling get screwed up, it flickers at times and become unusable.

I ran out of options and since this only happens on iOS emulator I am not sure what I can try to do more.

And yes, I am making sure that both refresher.complete() and infiniteScroll.complete() gets called after the asyc operation is over.

Any help will be appreciated. Here is a sample of the script. As you can see its pretty straight forward.

<ion-header>
    <ion-toolbar>
        <ion-title>Live</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh">
    </ion-refresher-content>
  </ion-refresher>

<ion-list>

    <ion-list-header>Most recent</ion-list-header>

    <ion-item text-wrap>Something never change.</ion-item>
    <ion-item text-wrap>Like what?</ion-item>
    <!-- **add 100 more of these to see the issue** -->
    
</ion-list>

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more data.">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

</ion-content>