Ioni c v4 - не удается запустить анимацию в IOS

Question

У меня есть один проект Ioni c v4, в котором есть одна страница с анимацией. Эта анимация работает в браузере и Android реальных устройствах, но не работает в эмуляторе IOS с использованием MACBOOK.

<ion-grid fixed class="center" *ngIf="playing==true">
<ion-row>
  <ion-col size="12">
    <ion-card *ngFor="let card1 of cards1" [class.stop] = "stop1==true" [@cardSpinner]="card1.state">
      <ion-card-content>
        <ion-card-title class="center" [class.stop] = "stop1==true" expand="block">
          {{card1.name}}
        </ion-card-title>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
 <ion-row>
  <ion-col size="12">
    <ion-card  *ngFor="let card2 of cards2" [class.stop] = "stop2==true" [@cardSpinner]="card2.state">
      <ion-card-content class="center">
        <ion-card-title class="center" [class.stop] = "stop2==true" expand="block" >
          {{card2.name}}
        </ion-card-title>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>

TS:

        import { Component, OnInit } from '@angular/core';
        import { trigger, state, animate, transition,style } from '@angular/animations';
        .....

        @Component({
          selector: 'app-game-playing-slotmachine',
          templateUrl: './game-playing-slotmachine.page.html',
          styleUrls: ['./game-playing-slotmachine.page.scss'],
          animations: [
            trigger('cardSpinner', [
              state('in', style({ opacity: 1, transform: 'translateY(0)' })),
              state('out', style({ opacity: 1, display: 'none', transform: 'translateY(-100%)' })),

              transition('in => out', [
                style({ transform: 'translateY(0)', opacity: 1 }),
                animate('0.2s', style({ transform: 'translateY(-100%)', opacity: 0 }))
              ]),
              transition('out => in', [
                style({ transform: 'translateY(100%)', opacity: 0 }),
                animate('0.2s', style({ transform: 'translateY(0)', opacity: 1 }))
              ])
            ])
          ]
        })

        export class GamePlayingSlotmachinePage implements OnInit {

        ...

          constructor(
            ...
          ) { 

            ...

          }

          ngOnInit() {

            ...

          }

          getCards(){

            ...

            this.cards1 = this.cardsList.cardsSlot1;

            this.cards2 = this.cardsList.cardsSlot2;

            this.cards1.forEach(card => card.state = 'out');
            this.cards2.forEach(card => card.state = 'out');
          }

          play(){
            this.playing = true;

            this.animateSpin();
          }

          animateSpin(){

            ...

            this.spinAnimation = true;

            var timeout1 = 0;
            var timeout2 = 0;

            var count = 0;

            this.cards1.forEach(card => card.state = 'out');
            this.cards2.forEach(card => card.state = 'out');

            this.stop1 = false;
            this.stop2 = false;


            while( count < 15){

              var randomIndex1 = Math.round(Math.random() * (this.cards1.length - 1) - 0) + 0;
              var randomIndex2 = Math.round(Math.random() * (this.cards2.length - 1) - 0) + 0;

              count ++;

              this.stateChange1(randomIndex1, timeout1, count)
              this.stateChange2(randomIndex2, timeout2, count)

              timeout1 = timeout1 + 550;
              timeout2 = timeout2 + 850;

            }

          }

          stateChange1(randomIndex1, timeout1, count) {
            setTimeout( () => {

              this.cards1.forEach(card => card.state = 'out');

              this.cards1[randomIndex1].state = 'in';

              if (count == 15) {this.stateChangeColor(1, timeout1)}
            }, timeout1);
          }

          stateChange2(randomIndex2, timeout2, count) {
            setTimeout( () => {

              this.cards2.forEach(card => card.state = 'out');

              this.cards2[randomIndex2].state = 'in';

              if (count == 15) {this.stateChangeColor(2, timeout2)}

            }, timeout2);
          }

          stateChangeColor(fieldId, timeout) {
            setTimeout( () => {

              if (fieldId == 1) {this.stop1 = true;}
              else {
                this.stop2 = true;
                this.spinAnimation = false;
              }
            }, 2000);
          }

        }

Я прочитал о проблемах отношений и нашел его об использовании polyfill, и вот как я это сделал:

Сначала я запускаю npm install --save web-animations- js.

и это файл polyfill.ts (часть импорта анимаций)

/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
 import 'web-animations-js/web-animations.min';  // Run `npm install --save web-animations-js`.

и импорт в моем файле main.ts

    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';

    import './polyfills' 

    if (environment.production) {
      enableProdMode();
    }

    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));

, но он все еще не работает. Я вижу вызываемые методы, данные меняются между IN и OUT, но анимация не работает.

Я использую эти версии:

"@angular/animations": "^8.0.0",
"web-animations-js": "^2.3.2",
"cordova-ios": "^5.1.1",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",

Я что-то не так делаю?

Спасибо