ion-infinite-scroll is broken #10889

kumaresan-cgvak · 2017-03-23T13:30:46Z

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

The text was updated successfully, but these errors were encountered:

jgw96 · 2017-03-23T14:10:27Z

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 · 2017-03-23T15:00:42Z

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 · 2017-03-23T15:39:04Z

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

kumaresan-cgvak · 2017-03-23T16:26:50Z

@NoNameProvided NO

mattlin4567 · 2017-03-23T16:28:32Z

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.

references #10889

anphu7492 · 2017-03-23T23:30:02Z

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 · 2017-03-26T14:44:10Z

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:

Create new ionic project ionic start testinfinite blank --v2
Use exact code as per infinte-scroll documentation
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)

tlockcuff · 2017-03-27T00:12:31Z

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 · 2017-03-27T09:36:07Z

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 · 2017-03-27T11:31:44Z

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 · 2017-03-28T01:10:02Z

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

danielabbatt · 2017-03-28T14:39:01Z

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 · 2017-03-28T23:15:07Z

@danielabbatt version 2.2.0 works fine, thank you !

tscislo-lingaro · 2017-03-30T12:21:43Z

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 · 2017-03-31T15:05:10Z

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 · 2017-04-01T05:15:54Z

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

HamzaLJ · 2017-04-01T16:25:36Z

Same here!!! It does not work on iOS

tscislo-lingaro · 2017-04-02T17:44:27Z

@jgw96 how much breaking change 3.0.0 going to be?

qng5150 · 2017-04-03T06:05:32Z

Also experiencing this issue.

corran2go · 2017-04-04T15:05:34Z

@jgw96 what about a 2.3.1 with this fix?

wodka · 2017-04-05T12:03:33Z

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

NoNameProvided · 2017-04-05T15:50:15Z

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

dmastag · 2017-04-05T16:01:51Z

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 · 2017-04-05T16:38:59Z

Updated App to ionic3, sadly problem is still happening

dmastag · 2017-04-05T16:57:39Z

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 · 2017-04-05T18:11:53Z

Lets mention @jgw96 then

dmastag · 2017-04-05T18:17:28Z

@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 · 2017-04-05T20:49:16Z

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

djereg · 2017-04-05T23:00:53Z

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

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

This worked for me, but tested only on Android.

dmastag · 2017-04-06T01:35:57Z

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

fixes #11081 fixes #10976 fixes #10966 fixes #10936 fixes #11051 fixes #10889

BatStak · 2017-04-06T14:58:38Z

I can confirm the issue. Fresh last ionic version.

fixes #11081 fixes #10976 fixes #10966 fixes #10936 fixes #11051 fixes #10889

ryaa · 2017-04-10T17:10:35Z

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

BatStak · 2017-04-11T06:27:40Z

@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 · 2017-10-06T05:55:55Z

same problem ionic framework: ionic-angular 3.6.0

akashmahale · 2018-04-17T08:52:10Z

i have the same issue. infinite scroll fires multiple events

alonetech · 2018-06-21T12:46:00Z

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.

<ion-infinite-scroll (ionInfinite)="loadMore($event)">

ionitron-bot · 2018-09-01T03:50:12Z

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.

jgw96 added needs info labels Mar 23, 2017

manucorporat self-assigned this Mar 23, 2017

manucorporat added a commit that referenced this issue Mar 23, 2017

fix(infinite-scroll): regression in #8099

58b57c0

references #10889

burhanyldz mentioned this issue Mar 30, 2017

Infinite scroll doesn't work on iOS #10976

Closed

jgw96 closed this as completed Mar 31, 2017

Manduro mentioned this issue Apr 6, 2017

Scrolling trouble on UIWebView since 2.3.0 #11086

Closed

manucorporat added a commit that referenced this issue Apr 6, 2017

fix(scroll): scroll issues in UIWebView

db37072

fixes #11081 fixes #10976 fixes #10966 fixes #10936 fixes #11051 fixes #10889

manucorporat added a commit that referenced this issue Apr 6, 2017

fix(scroll): scroll issues in UIWebView

6c4a7ec

fixes #11081 fixes #10976 fixes #10966 fixes #10936 fixes #11051 fixes #10889

manucorporat added a commit that referenced this issue Apr 6, 2017

fix(scroll): scroll issues in UIWebView

26d10c4

fixes #11081 fixes #10976 fixes #10966 fixes #10936 fixes #11051 fixes #10889

yaozuwang mentioned this issue Oct 8, 2017

Ionic Infinite Scroll position top very buggy in ios #13060

Closed

ionitron-bot bot locked and limited conversation to collaborators Sep 1, 2018

ion-infinite-scroll is broken #10889

ion-infinite-scroll is broken #10889

Comments

kumaresan-cgvak commented Mar 23, 2017

jgw96 commented Mar 23, 2017

kumaresan-cgvak commented Mar 23, 2017 • edited Loading

NoNameProvided commented Mar 23, 2017 • edited Loading

kumaresan-cgvak commented Mar 23, 2017

mattlin4567 commented Mar 23, 2017

anphu7492 commented Mar 23, 2017 • edited Loading

dmastag commented Mar 26, 2017 • edited Loading

tlockcuff commented Mar 27, 2017

ramoncarreras commented Mar 27, 2017

lukezona commented Mar 27, 2017 • edited Loading

KennedyIhe commented Mar 28, 2017

danielabbatt commented Mar 28, 2017

emersonjsouza commented Mar 28, 2017

tscislo-lingaro commented Mar 30, 2017

jgw96 commented Mar 31, 2017

dmastag commented Apr 1, 2017

HamzaLJ commented Apr 1, 2017

tscislo-lingaro commented Apr 2, 2017

qng5150 commented Apr 3, 2017

corran2go commented Apr 4, 2017

wodka commented Apr 5, 2017

NoNameProvided commented Apr 5, 2017 • edited Loading

dmastag commented Apr 5, 2017

dmastag commented Apr 5, 2017

dmastag commented Apr 5, 2017

NoNameProvided commented Apr 5, 2017

dmastag commented Apr 5, 2017

xx0r commented Apr 5, 2017

djereg commented Apr 5, 2017

dmastag commented Apr 6, 2017 • edited Loading

BatStak commented Apr 6, 2017

ryaa commented Apr 10, 2017

BatStak commented Apr 11, 2017 • edited Loading

yaozuwang commented Oct 6, 2017

akashmahale commented Apr 17, 2018

alonetech commented Jun 21, 2018 • edited Loading

ionitron-bot bot commented Sep 1, 2018

kumaresan-cgvak commented Mar 23, 2017 •

edited

Loading

NoNameProvided commented Mar 23, 2017 •

edited

Loading

anphu7492 commented Mar 23, 2017 •

edited

Loading

dmastag commented Mar 26, 2017 •

edited

Loading

lukezona commented Mar 27, 2017 •

edited

Loading

NoNameProvided commented Apr 5, 2017 •

edited

Loading

dmastag commented Apr 6, 2017 •

edited

Loading

BatStak commented Apr 11, 2017 •

edited

Loading

alonetech commented Jun 21, 2018 •

edited

Loading