title: On iOS devices, why does Ionic 4 Infinite Scroll jump to the top of the page when the ionInfinite event is fired?
body: <h1>Bug Report</h1>
  
  <p><strong>Ionic version:</strong>
  
  
  [x] <strong>4.x</strong></p>
  
  <p><strong>Current behavior:</strong>
  
  On iOS devices, the screen jumps to the top of the list when items are added to a list via the <a href="https://ionicframework.com/docs/api/infinite-scroll" rel="nofollow noreferrer">infinite scroll</a> component.</p>
  
  <p>This is not a problem on the web (Chrome or Safari) or on Android devices.</p>
  
  <p><img src="https://user-images.githubusercontent.com/5905154/71850543-86a4bd80-30a2-11ea-95c0-53d0e443decd.gif" alt="iosInfiniteScrollIssue"></p>
  
  <p><strong>Expected behavior:</strong>
  
  The screen scroll should not be affected by adding items to a list. The user should see new posts appear and continue scrolling as normal.</p>
  
  <p><strong>Steps to reproduce:</strong>
  </p>
  
  <ol>
  <li>Build the app in Xcode</li>
  <li>Run on a device</li>
  <li>Start scrolling down. Once you hit Post 5, you'll be sent to the top of the screen (Post 1).</li>
  </ol>
  
  <p><strong>Related code:</strong></p>
  
  
  
  <p>The repo is at <a href="https://github.com/bennyt2/ionic-infinite-scroll-test" rel="nofollow noreferrer">https://github.com/bennyt2/ionic-infinite-scroll-test</a>. Here are the two relevant files:</p>
  
  src/app/home/home.page.html: HTML that uses ion-infinite-scroll
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-content&gt;
    &lt;ng-container *ngFor="let post of posts;let i = index"&gt;
      &lt;div class="post post-{{post % 2}}"&gt;Post {{post}}&lt;/div&gt;
    &lt;/ng-container&gt;
  
    &lt;div class="no-posts-yet" *ngIf="posts.length === 0"&gt;No posts yet...&lt;/div&gt;
    &lt;div class="end-of-feed" *ngIf="allPostsLoaded"&gt;End of feed&lt;/div&gt;
  
    &lt;ion-infinite-scroll class="infinite-scroll" threshold="300px" (ionInfinite)="getMorePosts($event)"&gt;
      &lt;ion-infinite-scroll-content loadingSpinner="circles" loadingText="Loading more posts..."&gt;
      &lt;/ion-infinite-scroll-content&gt;
    &lt;/ion-infinite-scroll&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  src/app/home/home.page.ts: Component that handles post retrieval and the ionInfinite event
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-infinite-scroll-test',
    templateUrl: './infinite-scroll-test.page.html',
    styleUrls: ['./infinite-scroll-test.page.scss'],
  })
  export class InfiniteScrollTestPage implements OnInit {
  
    posts: number[] = [];
    maxPosts: number = 100;
    step: number = 5;
    loadedPosts: number = 0;
    allPostsLoaded: boolean = false;
  
    constructor() {
    }
  
    ngOnInit() {
      this.addPosts(5);
    }
  
    addPosts(number: number) {
      for (let i = 0; i &lt; number; i++) {
        this.posts.push(this.posts.length + 1);
        this.loadedPosts = this.posts.length + 1;
      }
    }
  
    getMorePosts(event) {
      setTimeout(() =&gt; {
        this.addPosts(5);
        event.target.complete();
  
        // App logic to determine if all data is loaded
        // and disable the infinite scroll
        if (this.loadedPosts &gt; this.maxPosts) {
          event.target.disabled = true;
          this.allPostsLoaded = true;
        }
      }, 500)
    }
  }
  </code></pre>
  
  <p><strong>Ionic info:</strong>
   from a terminal/cmd prompt and paste output below): --></p>
  
  <pre><code>Ionic:
  
     Ionic CLI                     : 5.4.1 (/home/spikefalcontwo/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
     Ionic Framework               : @ionic/angular 4.11.7
     @angular-devkit/build-angular : 0.801.3
     @angular-devkit/schematics    : 8.1.3
     @angular/cli                  : 8.1.3
     @ionic/angular-toolkit        : 2.1.1
  
  Capacitor:
  
     Capacitor CLI   : 1.4.0
     @capacitor/core : 1.4.0
  
  Utility:
  
     cordova-res : not installed
     native-run  : not installed
  
  System:
  
     NodeJS : v10.15.3 (/home/spikefalcontwo/.nvm/versions/node/v10.15.3/bin/node)
     npm    : 6.11.3
     OS     : Linux 5.0
  </code></pre>
  
  <p>Any idea what might be causing this?</p>