ion-infinite-scroll firing extremely infrequently

Question

I am trying to get ionInfiniteScroll to work - I have already gotten it to work in several other places in my app, and this page is actually almost identical to another page where it is working fine. When I scroll down nothing happens, no loading graphic. I have a console message right on the inside of my doInfinite method and it never executes...so the doInfinite code is never executing. I'm thinking maybe there is something wrong with the html structure since the method doesn't execute:

<ion-content no-padding>
  <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->

    ...

   <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of promotions" no-padding>
      <div class="feedtoptextcontainer">
        <!--<div class="imageparent">
          <img class="postprofilepic" src="{{a.url}}">
        </div>-->
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
        </div>
        <h3 class="promotitle">{{a.title}}</h3>
        <div class="desccontainer">
          <h4 class="deal">{{a.caption}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  ...

  <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>

doInfinite method code:

doInfinite(infiniteScroll) {
    console.log("in doinfinite promotionsssssss");
    setTimeout(() => {
      console.log('Begin async operation');
      /*console.log(this.content.directionY + "        upupupupupupu********");
      if(this.content.directionY == 'up') {
        this.show = false
      }
      else {
        this.show = true;
      }*/

      console.log(this.startAtKey1 + "     before %%^&^&^% start at");
      this.list2 = this.af.list('/promotions', {
      query: {
        orderByKey: true,
        endAt: this.startAtKey1,
        limitToLast: 11
      }});

      this.subscription11 = this.list2.subscribe(items => { 
          let x = 0;
          this.lastKey1 = this.startAtKey1;
          items.forEach(item => {


            let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png');

            storageRef.getDownloadURL().then(url => {
              console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
              item.customMetadata.picURL = url;
            }).catch((e) => {
              console.log("in caught url !!!!!!!$$$$$$$!!");
              item.customMetadata.picURL = 'assets/blankprof.png';
            });

            if(this.startAtKey1 !== item.$key && this.lastKey1 !== item.$key) {
              console.log(this.startAtKey1 + "   :startAtKey1 before 4444444        item key:     " + item.$key);
              this.promotions.push(item.customMetadata); //unshift?**************
            }

            if(x == 0) {
              this.startAtKey1 = item.$key;
            }

            x++;
          });          

      })

      infiniteScroll.complete(); 

    }, 500);
  }

UPDATE

I think another important thing to note is that I am using 5 different lists that look like the one below...all on the same page (I only have included 2 below - that is what I was last testing with). Where the ... is in the code, that are 4 more lists like the one you see above. They are all enclosed in <div>'s like the one above - and none of them are ever being displayed at the same time - I think I should post the whole <ion-content> just incase things are interfering with one another:

<ion-content no-padding>
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->



  <!--<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>-->


  <div class ='availability contentone' #availability [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let z of availabilities" no-padding (tap)="presentProfileModal(z.salon, z.time)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{z.pic}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{z.salon}}</h4><br>
          <h4 class="poststudio">{{z.time}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
  </div>

  <div class ='distance contentone' #distance [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let z of distances" no-padding (tap)="presentProfileModalDistance(z.salon)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{z.pic}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{z.salon}}</h4><br>
          <h4 class="poststudio">{{z.distance}} mi</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
  </div>

  <div class ='ratings contentone' #ratings [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of rating ; let i = index" no-padding (tap)="presentProfileModalRatings(a.username)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{a.picURL}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
          <h4 class="poststudio">{{a.stars}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
  </div>

  <div class ='price contentone' #price [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of pricesArray" no-padding (tap)="presentProfileModalPrice(a.username)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{a.picURL}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
          <h4 class="poststudio">{{a.price}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfiniteP($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of promotions" no-padding>
      <div class="feedtoptextcontainer">
        <!--<div class="imageparent">
          <img class="postprofilepic" src="{{a.url}}">
        </div>-->
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
        </div>
        <h3 class="promotitle">{{a.title}}</h3>
        <div class="desccontainer">
          <h4 class="deal">{{a.caption}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>
</ion-content>

I switch the lists in and out by using renderer like renderer.setElementStyle(el, 'display', 'none) or block.

Answer 1

It turned out to be conflicting css that I had on .scroll-content. It seems if you add css to .scroll-content, ion-infinite-scroll stops working.