bug: Infinite scroll stange behaviour

[oliverandersencox]

Bug Report

Ionic version: [x] 5.x

Current behavior: There are some stange behaviours going on with the infinite scroll.

1. When scrolling i get there errors pop uo throughout the scroll:

ion-infinite-scroll_2-ios.entry.js:45 GET http://localhost:8100/undefined 404 (Not Found) - ion-infinite-scroll_2-ios.entry.js:45 GET http://localhost:8100/undefined 404 (Not Found) ion-app_8-ios.entry.js:467 GET http://localhost:8100/undefined 404 (Not Found)

2. The threshhold seems to have 0 effect on when the scroll is called. It seems to trigger just before i reach the bottom of the ion content. I have tried setting the threshhold in pixels, percentage with no luck.

Expected behavior:

The trigger for the infinite scroll should respond without error when reaching the allocated scroll distance from the bottom Steps to reproduce: Add infinite scroll to the ion-content, within an ng-container which is set to visible and scroll.

Related code:

<ion-content [fullscreen]="true">

Events

<ng-container *ngIf="$categories | async as categories; else loading">

<!--- CATEGORIES BAR-->
<categories-bar [categories]="categories" (categoryEvent)="filterByCategory($event)" [showDiscover]="true"
  @fadeHideShow>
</categories-bar>

<!-- ARTIST LOCATION SLIDER -->
<trending-artist [location]="city"></trending-artist>

<!---SLIDER FOR PICKING WHEN -->
<time-period-picker (periodEvent)="chooseDate($event)"></time-period-picker>

<!--- EVENT LIST -->
<ng-container *ngIf="$events | async as events;  else eventLoader">
  <div class="w-100" *ngIf="events.items.length; else emptyList" [@fadeHideShow]>
    <event-card *ngFor="let event of events.items; trackBy: trackByService.item" [event]="event"
      (click)="goToPage(['event', event.id, event.type])">
    </event-card>

    <br> <br>

    <ion-infinite-scroll position="bottom" threshold="80%" (ionInfinite)="loadMore($event.target, events)">
      <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="Loading more events...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>
</ng-container>

**Ionic info:** Ionic: Ionic CLI : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.2.1 @angular-devkit/build-angular : 0.901.8 @angular-devkit/schematics : 9.1.8 @angular/cli : 9.1.8 @ionic/angular-toolkit : 2.2.0 Capacitor: Capacitor CLI : 2.2.0 @capacitor/core : 2.2.0 Utility: cordova-res : not installed native-run : not installed System: NodeJS : v14.0.0 (/usr/local/bin/node) npm : 6.14.5 OS : macOS Catalina Infinite scroll had never worked with the set up above - and by that, I mean with a threshhold set to any percentage or pixel value.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. 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.

Thank you for using Ionic!