Ionic & Firebase Infinite Scrolling

I have added Ionic infinite scroll to a list of posts in my app and in a browser or android emulator it works great.

However, when I try the same using the debug apk on a device, the items load but it seems to load at the end of the list rather than the being able to scroll down through the new items.

The last page of items do load and allow you to scroll down as expected but any pages in between I would have to scroll up to view the new posts.

This is the code used for the page

import { Component } from '@angular/core';
import { IonicPage, MenuController } from 'ionic-angular';
import { PostsProvider } from '../../providers/posts'
import { LoadingProvider } from '../../providers/loading';
import firebase from 'firebase';

@IonicPage({
  name: 'reasons-page'
})
@Component({
  selector: 'page-reasons',
  templateUrl: 'reasons.html'
})
export class ReasonsPage {
  private limit: number = 10;
  private userId: any;
  private postList: any;
  private lastId: any;
  private finishedLoading: boolean = false;

  constructor(public menuCtrl: MenuController, private loadingProvider: LoadingProvider, private postsProvider: PostsProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ReasonsPage');
    this.userId = firebase.auth().currentUser.uid;

    this.getReasonsPosts();

    this.postsProvider.getLastId().subscribe(data => {
      data.forEach( item => {
        this.lastId = item.$key
      });
    });
    this.loadingProvider.hide();
    this.menuCtrl.enable(true);
    this.menuCtrl.swipeEnable(true);
    this.menuCtrl.close();
  }

  // Toggle sidebar
  toggleMenu() {
    this.menuCtrl.toggle();
  }

  onInfiniteScroll(event) {
    console.log('Async started');
    this.limit += 10; // or however many more you want to load
    setTimeout(() => {       
      this.getReasonsPosts();
      console.log('Async operation has ended');
      event.complete();
    }, 1000);  
  }  

  doRefresh(refresher) {
    console.log('Begin async operation', refresher);
    this.finishedLoading = false;
    setTimeout(() => {
      this.getReasonsPosts();
      console.log('Async operation has ended');
      refresher.complete();
    }, 1000);
  }

  getReasonsPosts(){
    this.postsProvider.getPosts(this.limit).subscribe(itemList => {
      let postItems = [];
      itemList.forEach( item => {
        if (this.lastId === item.$key){
          this.finishedLoading = true;
        }
        postItems.push({ 
          postId: item.$key,
          reason: item.reason,
          favourites: item.favourites,
          timestamp: item.timestamp,
          dateCreated: item.dateCreated,
          img: item.img,
          });
        return false;
      });
      this.postList = postItems;
    });
  }

}

and this is the template code

<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <ion-card *ngFor="let post of postList | reverse">
        <ion-card-header>
            {{post.dateCreated | date: 'dd/MM/yyyy' }}
        </ion-card-header>
        <div class="card-img" [style.backgroundImage]="'url(' + post.img + ')'"></div>
        <div class="post-actions">
            <button *ngIf="!post.favourites || post.favourites[userId].favourited !== true" ion-button (click)="this.postsProvider.addFavourite(post.postId)">add to favourites</button>
            <button *ngIf="post.favourites && post.favourites[userId].favourited === true" ion-button (click)="postsProvider.removeFavourite(post.postId)">Remove Favourite</button>
            <div class="flag" (click)="postsProvider.flagPost(post.postId)">
                <ion-icon name="flag"></ion-icon>
            </div>
        </div>
        <ion-card-content>
            <p>
                {{ post.reason }}
            </p>
        </ion-card-content>
        <!--<div class="flag-post" (click)="postsProvider.flagPost(post.postId)">
            <ion-icon name="flag"></ion-icon>
        </div>-->
    </ion-card>
    <ion-infinite-scroll *ngIf="this.finishedLoading !== true" (ionInfinite)="onInfiniteScroll($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

these are the 2 functions that are used to get the post and the last post ID

  getPosts(limit) {
    return this.postList = this.db.list('/reasons', {
      query: {
          limitToLast: limit
      }
    });
  }

  getLastId() {
    return this.db.list('/reasons', {
      query: {
          limitToFirst: 1
      }
    });
  }