ionic-framework: ion-infinite-scroll is broken

Updated App to ionic3, sadly problem is still happening

I’m experiencing this issue as well. The ion-infinite-scroll works fine in chrome, but not on an iOS device.

iOS: 10.2.1 Ionic Framework: 2.3.0

When scrolling to the bottom of ion-content, there’s a blank section of 84 pixels. I assuming this is where the ion-infinite spinner would normally show.

I tried adding/removing the enabled property on the ion-infinite-scroll input. This had no effect.

Hello, thanks for opening an issue with us! This issue was caused by a regression related to scroll events in ionic 2.3.0. This has since been fixed and will be in the 3.0 release. Sorry about the hassle!

I have the same issue after upgrading to 2.3.0. downgrading fixes the issue

I have same issue after upgrading to 2.3.0 my ionic info:

    Cordova CLI: 6.5.0 
    Ionic Framework Version: 2.3.0
    Ionic CLI Version: 3.0.0-beta.4
    ios-deploy version: 1.9.0 
    ios-sim version: 5.0.8 
    OS: macOS Sierra
    Node Version: v6.9.1
    Xcode version: Xcode 8.1 Build version 8B62

it works when the initial list is short(all in one page), but if the list is longer than on page, ionInfinite won’t fire when reach the bottom of page.

@jgw96 what about a 2.3.1 with this fix?

@jgw96 does this mean that we have to choose to either use 2.2.0 or wait until 3 is released?

I have a similar issue that I think is related. Since upgrading to 2.3.0 ion-infinite is not working, but on iOS only.

Steps to reproduce:

1. Create new ionic project ionic start testinfinite blank --v2
2. Use exact code as per infinte-scroll documentation
3. Build and run with xcode

This are the scenarios I have tested (passed is represented by a check mark):

• ionic serve on Windows
• ionic serve on Sierra MacOS
• run on android device (Asus Zenfone 3)
• run on iOS device (iPhone SE)

I experienced the same issue but with reversed infinite scroll. It triggers the function when scrolling to the top but automatically change the state from disabled to enabled after a while (about 20 seconds) or when change view and then come back. The enabled state create an empty space (84px height) for the infinite scrolling component.

Related code:

//*.html
<ion-infinite-scroll (ionInfinite)="loadMoreMessages($event)"
                       position="top"
                       [enabled]="shouldEnableScrolling">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

//*.ts
loadMoreMessages(infiniteScroll?) {
       this.getMessages()
       .subscribe(messages => {
         this.shouldEnableScrolling = messages.length >= this.fetchLimit;
         ...
         if (infiniteScroll) {
           infiniteScroll.complete();
         }
       });
     }

i have the same issue. infinite scroll fires multiple events

same problem ionic framework: ionic-angular 3.6.0

@ryaa

It’s working again in last release https://github.com/driftyco/ionic/releases/tag/v3.0.1

The only upgrade is package.json and those lines in app.module.ts

import { BrowserModule } from '@angular/platform-browser';

and

BrowserModule,
IonicModule.forRoot(MyApp)

package.json looks like this :

  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },

Got some advise from North McCormick on Slack to use wkwebview https://github.com/driftyco/cordova-plugin-wkwebview-engine#installation-instructions

And can confirm that its working as a temporary workaround

@djereg already tried that yesterday and it is not working for ios

Again tried exactly my steps as per my previous comment (new app with ionic3 and add ion-infinite) and its still not working.

Does anyone have a hack for this?

Yes, just saw the release an hour ago and am in the process of upgrading using the migration guide. Will hopefully be able to put the result i get here.

Also experiencing this issue.

Yes, same problem here. Ion-infinite is not working on iOS emulator or real device.

Cordova CLI: 6.5.0 Ionic Framework Version: 2.3.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.1.4 ios-deploy version: 1.9.0 ios-sim version: 5.0.11 OS: macOS Sierra Node Version: v7.1.0 Xcode version: Xcode 8.2.1 Build version 8C1002