Infinite Scroll : IOS display problem during fast scrolling (ion6 and Angular 15)

Hi

i set up infinite scroll in a projet using Angular 15 and ionic6.

I have an issue on ios (not appears on Android) : scrolling very fast on
a list of items, some part of the list is not displayed (blanck part randomly) on the dom , but data re-appears once i made a small scroll up or down. It seems to be a screen refresh problem

here is an example of the display :

my infinite-scroll implementation (at the end-part of my code) :

...
                    <app-session-item-schedule
                      [hasFavoriteStar]="true"
                      [session]="OneSession"
                      link="/app/tabs/programme/session/{{(dayIndex < 999) ? dayIndex : sessionHalfDay.dayIndex }}/{{OneSession.idSession}}"
                      [linkQueryParams]="{routeBack: '/app/tabs/programme'}"
                      [listFavorites]="listFavorites"
                      [sessionsToShow]="sessionsToShow"
                      [indexSessionToShow]="indexSessionToShow"
                      [indexSessionToShowSessions]="indexSessionToShowSessions">
                    </app-session-item-schedule>
                  </ion-item-sliding>
                </ion-list>
              </ion-col>
            </ng-container>
          </app-card-congress>
        </ion-col>
        <ion-infinite-scroll (ionInfinite)="loadData($event)" class="infinite">
          <ion-infinite-scroll-content class="loading-spinner" loadingSpinner="bubbles"> </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-row>
    </ng-container>
  </ion-grid>
</ion-content>

app-session-item-schedule , details :

<app-session-item-style></app-session-item-style>

<ng-template #labels>
  <ion-label *ngIf="session" class="sessions-day__content" [ngStyle]="{ 'border-left-color': getSessionColor(session) }">
    <h3 class="sessions-day__content__title">
      <!-- <b *ngIf="session?.reference">{{session.reference}} - </b> --> <b class="congress">{{ session.title }}</b>
    </h3>
    <p *ngIf="showTracks && session?.tracks && session.tracks.length > 0" class="sessions-day__content__track">
      <ion-chip class="sessions-day__content__track__chip" color="dark" outline>
        <ion-label color="dark">
          <ion-icon class="sessions-day__content__track__chip__icon" color="dark" [name]="getIcon().name" [src]="getIcon().src"> </ion-icon>
          {{ getInlineTracks(session.tracks) }}
        </ion-label>
      </ion-chip>
    </p>

    <p *ngIf="session.ownRole" class="sessions-day__content__track">
      <ion-chip class="ion-text-nowrap sessions-day__content__track__chip" color="dark" outline>
        <ion-label color="dark">
          <ion-icon class="sessions-day__content__track__chip__icon" color="dark" name="person"> </ion-icon>
          {{ session.ownRole.name }}
        </ion-label>
      </ion-chip>
    </p>


  </ion-label>
</ng-template>

<ion-item
  [attr.track]="session && session.topics ? encodeTrack(session.topics) : ''"
  [detail]="!hasFavoriteStar && link"
  class="ion-no-padding sessions-day"
  [class]="{
    'no-border': !realShowTime,
    'do-i-appear': session.doIAppear,
    'custom-border-radius': session.doIAppear,
    'passed-session': isSessionPassed(session)
  }"
>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col
        *ngIf="session && realShowTime"
        size="2"
        class="ion-text-center ion-align-items-center ion-justify-content-center sessions-day__time"
        [class]="isSessionInProgress(session) ? 'isLive' : ''"
      >
        <ion-badge *ngIf="isSessionInProgress(session)" [color]="'danger'" class="live">
          <div class="point"></div>
          LIVE
        </ion-badge>
        <div class="sessions-day__time__label">
          <ion-label *ngIf="session" color="dark"> {{ session.timeBegin }}<br />{{ session.timeEnd }} </ion-label>
          <div *ngIf="session.tags?.length && session.tags.length > 0 && hasReplay(session.tags)">
            <ion-button [id]="'click-trigger-' + session.idSession" fill="clear">
              <ion-icon class="sessions-day__action__icon--black" color="dark" src="assets/icon/icon_replay.svg"> </ion-icon>
            </ion-button>
            <ion-popover [trigger]="'click-trigger-' + session.idSession" triggerAction="click">
              <ng-template>
                <ion-row class="ion-padding">{{ 'session.available-on-replay' | translate }}</ion-row>
              </ng-template>
            </ion-popover>
          </div>
        </div>
      </ion-col>
      <ion-col *ngIf="!link" [size]="realShowTime ? (hasFavoriteStar ? 8 : 10) : hasFavoriteStar ? 10 : 12">
        <ng-container *ngTemplateOutlet="labels"></ng-container>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

my method loadData :


public loadData(e: Event): Promise<boolean> {
    const event = e as InfiniteScrollCustomEvent;

    return new Promise((resolve) => {
      setTimeout(async () => {
        const isResolve = await this.loadDataInner(this.sessionsToShowStorageIndex);
        if (!isResolve) {
          event.target?.complete();
          resolve(false);
          return;
        }
        this.sessionsToShowStorageIndex++;
        if (this.sessionsToShowStorage[this.sessionsToShowStorageIndex]) {
          this.sessionsToShowStorageInnerIndex[this.sessionsToShowStorageIndex] = this.sessionsToShowSize;
          const group = cloneDeep(this.sessionsToShowStorage[this.sessionsToShowStorageIndex]);
          group.sessions = group.sessions.slice(0, this.sessionsToShowSize);
          this.sessionsToShow = [...this.sessionsToShow, group];
        }
        event.target?.complete();

        if (this.sessionsToShowStorage.length - 1 <= this.sessionsToShowStorageIndex) {
          if (event.target) {
            event.target.disabled = true;
          }
          resolve(true);
        } else {
          resolve(false);
        }
      }, 0);
    });
  }

i don’t know if somebody already had this bug, on ios display.
thanks and have a nice day.

Can you replicate this in github repo? While having sample code is good, a demo app that shows the issue is better

Hi Mike, and thanks for your reply.

we create a repo for you if you want to test in real condition.
the bug appears only on iphone (not on Android and not on similators).
https://github.com/ttripeau/ionic-app

if you only want to test the bug you can download the app from appstore :slight_smile: https://apps.apple.com/fr/app/sfh-2023/id6446113302
going to tabs programme and scrolling quickly to down, you could see the bug.

thanks again for the support.