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

1 Like

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.

Hi, i come back to ask to the Ionic Team if a solution exist to fix the bug…hope you will have time to have a look. :).
have a nice day…

I’m having the same problem. If you perform fast scrolling then the problem happens. You need scroll back to. upper and back again to trigger the infinite scroll functions.

Having the same problem too. It depends on how fast you scroll, the screen is completly blank after loading the next chunk of data. When i rotate the screen the page is repainted and the data is displayed correcty. No problem in web or android but also in iPhone simulator.
I’m using Ionic 7.1.2 with Angular 16.1.3. So the bug wasn’t fixed in new major Ionic release.