Search code examples
angularionic-frameworkionic5

Ionic 5 with Firestore on iOS scrolls up on new data

I'm listening on Firestore changes with snapshotChanges() [Angular Firestore] and I show and hide some data based on that.

Everthing works as expected on Android and Chrome however on Safari/iOS (real device, browser and simulator) on every change the view it'll scroll up if I previously scrolled down on the page.

<section *ngIf="!showl" style="margin-bottom: 120px; margin-top: 250px;">
   <div *ngIf="dvid" style="z-index: -100;">
      <div *ngFor="let telemetria of telemetrias">

        <ion-card mode="ios" (click)="openIceSetting();">
        </ion-card>

        <ion-card *ngIf="telemetria.estado != '0' && telemetria.estado != '1'">
        </ion-card>

       <ion-card *ngIf="telemetria.estado != '0' && telemetria.estado != '1' && telemetria.estado != '2'">
       </ion-card>

     </div>
   </div>
</section>

I'm not sure if it's a Ionic bug or if someone faced this before.

Also, I removed all cards and components inside the *ngFor and just showed plain data and that worked perfectly, it wouldn't scroll back up:

<section *ngIf="!showl" style="margin-bottom: 120px; margin-top: 250px;">
   <div *ngIf="dvid" style="z-index: -100;">
      <div *ngFor="let telemetria of telemetrias">

         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>
         <h1>telemetria.estado </h1>

     </div>
   </div>
</section>
Solution

  • I've reported this here. For me this is a bug. However, to anyone that faces this problem, I've fixed it by using trackByFn.