ion-slide not working with ngFor directive

Question

[EDIT, new info on the bottom of the post]

In my app I have a couple of different pages with a ion-slides element in. They all work correctly except one, and I've managed to follow the trail to the *ngFor directive.

This is the html code of the page:

          <ion-slides pager="false" class="mb-0 mr-2 ml-2">
              <ion-slide  *ngFor="let singolo of plafond; let i=index">
                <ion-card class="res1-container">
                  <ion-card-subtitle class="text-center pt-2 pr-1 pl-1">{{singolo.nomeClasse}}</ion-card-subtitle>
                  <ion-card-subtitle>Massimale periodo <b>{{singolo.massimaleDisponibilePeriodo|currency: 'EUR'}}</b></ion-card-subtitle>
                  <ion-card-content class="res1-container res1-wrapper">
                    <ngx-gauge  [type]="batchGaugeOpts.type"
                              [size]="batchGaugeOpts.size"
                              [value]="(singolo.totaleRimborsatoPeriodo/singolo.massimaleDisponibilePeriodo)*100"
                              [min]="0"
                              [max]="100"
                              [label]="batchGaugeOpts.label"
                              [thick]="batchGaugeOpts.thick"
                              [animate]="false"
                              [thresholds]="thresholdConfig"
                              [append]="batchGaugeOpts.append"
                              [cap]="batchGaugeOpts.cap"
                    >
                    <ngx-gauge-value>
                      {{((singolo.totaleRimborsatoPeriodo/singolo.massimaleDisponibilePeriodo)*100).toFixed(0)}}
                    </ngx-gauge-value>
                    </ngx-gauge>            
                  </ion-card-content>
                  <div class="mt-0 pb-1 text-center" align="center"><span class="t-blue">{{i+1}} di {{plafond.length}}</span></div>
                </ion-card>
              </ion-slide>
          </ion-slides> 

the typescript code that populates the "plafond" object is:

        const userdata = await this.authenticationService.getUser();   
        const plafond = await this.getPlafondData(userdata);

        setTimeout(async() => {
          this.userdata = userdata;
          this.plafond = plafond;
        }, 1500);

getPlafondData returns a promise that is correctly resolved, this is the JSON object i get:

[{"idClasse":"1","nomeClasse":"Diaria da infortunio","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":"200.00","massimaleDisponibilePeriodo":600},{"idClasse":"2","nomeClasse":"Diaria da malattia","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":400,"massimaleDisponibilePeriodo":400},{"idClasse":"3","nomeClasse":"Diaria R.S.A.","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":200,"massimaleDisponibilePeriodo":200},{"idClasse":"4","nomeClasse":"Visite mediche specialistiche","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"5","nomeClasse":"Esami clinici, accertamenti diagnostici e trattamenti fisioterapici","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"6","nomeClasse":"Trattamenti termali","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"7","nomeClasse":"Servizio ambulanze","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"8","nomeClasse":"Servizio Taxi Sanitario","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":100,"massimaleDisponibilePeriodo":100},{"idClasse":"9","nomeClasse":"Sussidio Scuola","periodo":"2020","totaleRimborsatoPeriodo":null,"massimaleDisponibilePerEvento":500,"massimaleDisponibilePeriodo":500}]

That I've validate with jsonlint.io . It's valid. If I don't use the *ngFor directive but create 9 slides using the notation plafond[index], the slides are correctly rendered and usable.

What is really strange is that on another page of the app I've this other slider:

<ion-slides *ngIf="convenzionati?.length >0; else nessunrisultato;" pager="false">
  <ion-slide *ngFor='let convenzionato of convenzionati; let i=index' class="mb-5">
    <ion-card class="res1-container ml-1 mr-1 pl-1 pr-1">        
      <ion-card-content>
        <ion-row>
        <div class="col-lg-12 col-md-12 mt-md-3 pl-1 pr-1">
            <div class="res1-wrapper">              
              <h1><span class="t-blue">{{convenzionato.nomeConvenzionato}}</span></h1>
              <p class="spec">{{convenzionato.descrizioneTipoConvenzionato}}</p>
              <div class="address-container mt-4 mb-3">
                <ul>        

                  <li>{{convenzionato.indirizzo}}</li>
                  <li>{{convenzionato.cap}}</li>
                  <li>{{convenzionato.comune}} ({{convenzionato.provincia}})</li>
                  <li><a href="tel://{{convenzionato.telefono}}">{{convenzionato.telefono}}</a></li>
                  <li><a href="mailto:{{convenzionato.email}}">{{convenzionato.email}}</a></li>
                </ul>
              </div>
              <p class="spec" *ngIf="authenticationService.isAuthenticated()">{{convenzionato.agevolazioni}}</p>
            </div>
        </div>          
        </ion-row>
            <ion-button class="bcc-button bcc-button-outline" shape="round" (click)="openMapsApp(convenzionato.indirizzo, convenzionato.comune)"><i class="fa fa-map-marker-alt fa-2x"></i></ion-button>
<!--             <ion-button fill="outline" (click)="openMapsApp(convenzionato.latitudine, convenzionato.longitudine)"><i class="fa fa-map-marker-alt fa-2x"></i></ion-button> -->            
           <ion-button class="bcc-button bcc-button-outline" shape="round" (click)="launchNav(convenzionato.indirizzo, convenzionato.comune)"><i class="fas fa-directions fa-2x"></i></ion-button>
<!--            <ion-button fill="outline" (click)="launchNav(convenzionato.latitudine, convenzionato.longitudine)"><i class="fas fa-directions fa-2x"></i></ion-button> -->
      </ion-card-content>
    <div class="mt-3 pb-1 text-center" align="center"><span class="t-blue">{{i+1}} di {{convenzionati.length}}</span></div>
    </ion-card>

  </ion-slide>
  </ion-slides>

Which is working flawlessly getting data pretty much in the same way:

this.convenzionati = await this.helperService.lookUp(lookUpCriteria);

I've been banging my head on this for some days now without being able to find anything obvious.

This is my ionic info output:

Ionic:

   Ionic CLI                     : 6.3.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0-beta.1
   @capacitor/core : 2.0.0-beta.1

Utility:

   cordova-res : 0.11.0
   native-run  : 0.3.0

System:

   NodeJS : v10.15.3 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

EDIT Ok this is even stranger than I thought. If I put mode="xxx" in the ion-slides definition, it works.. inverted. If I put <ion-slides mode="ios">, it work on android devices but not on iPhone. Viceversa, if i put <ion-slides mode="md"> it works on iPhone and not on android. This is really weird.