Ionic Infinite Scroll position top very buggy in ios

[ionitron-bot[bot]]

Original issue by @yaozuwang on 2017-10-06T06:04:41Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When i infinite scroll up, it infinite scroll many times if the user scrolls too fast upwards. If i disable infinite scroll, the ion-scroll-content will be set the enabled instead of disabled and this leaves a margin of height 84px.

Expected behavior:

Infinite scroll up should not executes many times regardless of how fast the user is scrolling. it shouldn't leave a enabled state after enabled is false.

Steps to reproduce:

Related code:

https://github.com/yaozuwang/InfiniteScroll-Test

  <ion-infinite-scroll position="top" threshold="1%" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Other information:

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

cli packages: (C:\Users\Admin\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.2 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.7.0
    npm  : 3.10.3
    OS   : Windows 10

[longgt]

Because ionic will not run ionInfinite handler in zone when position set to top, there will be some case where stated is not updated to view properly.

Workaround here is by moving states changed logic into Zone.run. The changes will be reflected to view.

[wcjord]

I'm trying to use infinite scroll with position="top" but, on ios, it fires when the user is at the bottom of the list as well as the top.

@Ionggt Could you explain that workaround a bit more please?

Ionic:

   ionic (Ionic CLI)  : 4.2.1
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, browser 5.0.3, ios 4.5.5
   Cordova Plugins       : no whitelisted plugins (18 plugins total)

System:

   ios-deploy : 2.0.0
   NodeJS     : v8.11.3 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 10.1 Build version 10B61

[longgt]

@wcjord The following logic below should be placed in a zone.

https://github.com/ionic-team/ionic-v3/blob/20dfbdd3037fa86dcda2a5ce07a2476ae344a9ee/src/components/infinite-scroll/infinite-scroll.ts#L336

Because logic in DomController will be executed outside of Angular Zone, it should be reentered for Angular know something has been changed and trigger change detection properly.

[wcjord]

@longgt Thanks for the quick response! Are you suggesting that's something an ionic user could do as like an extension to the component?

[longgt]

@wcjord The completely solution is modify Ionic source as the following here

      // ******** DOM WRITE ****************
      this._dom.write(() => {
        this._zone.run(() => {
          this._content.scrollTop = newScrollTop;
          this.state = STATE_ENABLED;
        });
      });

If you can't modify Ionic source, workaround is after called InfiniteScroll.complete() , call setTimeout to trigger Angular change detection manually instead.

[pedrovitor074]

any new about this ?

[wcjord]

@pedrovitor074 I couldn't figure out how to make the workaround suggested by @longgt work. My solution was making my list entries into OnPush strategy components and only listing part of the total. At some point, we will need to come back to this and, either figure out the built-in Infinite Scroll, or make our own version. It's lower priority at the moment and I'm hoping the Ionic team will address it first.

[indraraj26]

https://github.com/ionic-team/ionic-v3/issues/1083