Ionic-framework: ion-infinite-scroll is broken

[kumaresan-cgvak]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

If we include ion-infinite-scroll in a Page, then the page content height is broken.
A blank white space is added at bottom of the page.

Expected behavior:

if a n user scroll to teh end it should triger the ionInfinite event.

Steps to reproduce:

Related code:

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

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

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.12 
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hello, thanks for opening an issue with us. I cant seem to reproduce this issue locally, any chance you could provide a repo i could use to reproduce this?

[kumaresan-cgvak]

ion-content should have dynamic content. Where the content inside the ion-content is changed between ion-grid and ion-list based on conditions.

Also this happens After updating the ionic-angular to 2.3.0

[NoNameProvided]

Do you use the refresher also? They cannot play nicely together.

[kumaresan-cgvak]

@NoNameProvided NO

[mattlin4567]

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.

[anphu7492]

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();
         }
       });
     }

[dmastag]

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):

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

[TLockcuff]

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.

[ramoncarreras]

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

[lukezona]

Same problem here.

I'm using infinite scroll in a ion-grid element and it works everywhere except for iOS.

The strange thing is that after editing threshold and paddings it works on the first scroll and then stops working.

I can confirm that is a ionic-angular 2.3.0 problem. Downgrading it to 2.2.0 make the app working smoothly.

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.12
OS: macOS Sierra
Node Version: v6.0.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[KennedyIhe]

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

[danielabbatt]

My issue wasn't in an ion-grid element, but same problem. Works fine on 2.2.0, simply rolled back in package.json, no other changes required.

[emersonjsouza]

@danielabbatt version 2.2.0 works fine, thank you !

[tscislo-lingaro]

The same in here:

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: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.5
Xcode version: Not installed

Any chance for a fix to this?

[jgw96]

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!

[dmastag]

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

[HamzaLJ]

Same here!!! It does not work on iOS

[tscislo-lingaro]

@jgw96 how much breaking change 3.0.0 going to be?

[shinta5150]

Also experiencing this issue.

[corran2go]

@jgw96 what about a 2.3.1 with this fix?

[wodka]

there should clearly be a bugfix in the 2.3.x series...

[NoNameProvided]

Ionic 3.0 is released today, so all of you can start using it.

[dmastag]

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.

[dmastag]

Updated App to ionic3, sadly problem is still happening

[dmastag]

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?

[NoNameProvided]

Lets mention @jgw96 then

[dmastag]

@NoNameProvided not sure if that works. Since I think that closed issues are not checked frequently and I believe that he received tons of notifications.

Since he mentioned something about scroll events so I checked for any similar issues and found #10938. Then tried to do a new app with

<ion-content (ionScroll)="doSomething()">

Indeed that one is also not working on iOS. I guess those issues are connected.

[xx0r]

I can confirm, that upgrading from 2.3.0 to 3.0.0. doesn't fix this issue for iOS

[djereg]

````typescript
export class MyPage {
@ViewChild('container') container: Container;

ionViewDidLoad() {
this.container.enableScrollListener();
}
}
````

This worked for me, but tested only on Android.

[dmastag]

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

[BatMen]

I can confirm the issue. Fresh last ionic version.

[ryaa]

ion-refresher and ion-inifinite-scroll stopped working after upgrade to 2.3.0. Downgrading to 2.2.0 fixed the problem

[BatMen]

@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"
  },

[yaozuwang]

same problem ionic framework: ionic-angular 3.6.0

[akashmahale]

i have the same issue. infinite scroll fires multiple events

[alonetech]

ion-infinite-scroll issue event is not fired

I am getting 10 data per pagination but after 2 pages event is not working in function.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.