Ionic 4 - Animation stops on page change - ios only

Ionic Framework ionic-v3
1

Hello.

I have an ionic 4 application where on the main page it has a row of three blinking LEDs (blinking pattern dependent on state).

When I first get to the main page the LEDs blink appropriately. When I leave the main page and go to another page and then come back to the main page the LEDs are not blinking. The animation is no longer working.

I route to and from pages via a hamburger menu set up in my app.component.ts where page.url is for example ‘/main’

  this.zone.run(() => {
      this.router.navigate([page.url]);
  });

NOTE: I only see this on ios devices. Android works with no issue.

This was all working in ionic 3.

Below is the html

    <div class="leds">
        <div class="led-container">
            <div class="led led-red" [ngClass]="redLedState"></div>
            <div class="led led-yellow" [ngClass]="yellowLedState"></div>
            <div class="led led-green" [ngClass]="greenLedState"></div>
        </div>
    </div>

This is the .scss:

.leds {
    $led-size: 32px;
    $led-green: #33cd5f;
    $led-yellow: #ffc900;
    $led-red: #ef473a;
  
    @mixin on($color) {
      box-shadow: 0 0 4px 0 darken($color, 5%);
    }
  
    .led-container {
      text-align: center;
      border-bottom: 1px solid #111;
      width: 100%;
      display: block;
      padding: 10px 0px 6px 0px;
    }
  
    .led {
      display: inline-block;
      border-radius: 50%;
      width: $led-size;
      height: $led-size;
      margin-right: $led-size;
      opacity: 0.2;
      box-shadow: none;
  
      &:last-child {
        margin-right: 0;
      }
  
      &.led-green {
        background-color: $led-green;
        &.on, &.slow-flash, &.fast-flash {
          @include on($led-green);
        }
      }
  
      &.led-yellow {
        background-color: $led-yellow;
        &.on, &.slow-flash, &.fast-flash {
          @include on($led-yellow);
        }
      }
  
      &.led-red {
        background-color: $led-red;
        &.on, &.slow-flash, &.fast-flash {
          @include on($led-red);
        }
      }
  
      &.on {
        opacity: 1;
      }
    }
  
    .slow-flash {
      -webkit-animation: flash linear 1.75s infinite;
      animation: flash linear 1.75s infinite;
      -webkit-transition: none !important;
      transition: none !important;
    }
  
    .fast-flash {
      -webkit-animation: flash linear 0.4s infinite;
      animation: flash linear 0.4s infinite;
    }
  
    .slow-flash-add .fast-flash-add {
      -webkit-animation: none !important;
      animation: none !important;
      -webkit-transition: none !important;
      transition: none !important;
    }
  
    @-webkit-keyframes flash {
      0% {
        opacity: 0.2;
      }
      60% {
        opacity: 0.2;
      }
      62% {
        opacity: 1;
      }
      98% {
        opacity: 1;
      }
    }
  
    @keyframes flash {
      0% {
        opacity: 0.2;
      }
      60% {
        opacity: 0.2;
      }
      62% {
        opacity: 1;
      }
      98% {
        opacity: 1;
      }
    }
  }

Here is my ionic info:

Ionic:

   Ionic CLI                     : 5.2.8 (/Users/lester2/.nvm/versions/node/v12.6.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.802.2
   @angular-devkit/schematics    : 8.3.3
   @angular/cli                  : 8.3.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 10 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   ios-sim : 8.0.1
   NodeJS  : v12.6.0 (/Users/lester2/.nvm/versions/node/v12.6.0/bin/node)
   npm     : 6.11.3
   OS      : macOS Mojave
   Xcode   : Xcode 10.3 Build version 10G8

Here are my dependencies:

"dependencies": {
    "@angular/common": "^8.2.5",
    "@angular/core": "^8.2.5",
    "@angular/forms": "^8.2.5",
    "@angular/platform-browser": "^8.2.5",
    "@angular/platform-browser-dynamic": "^8.2.5",
    "@angular/router": "^8.2.5",
    "@ionic-native/app-version": "^5.13.0",
    "@ionic-native/ble": "^5.13.0",
    "@ionic-native/core": "^5.13.0",
    "@ionic-native/diagnostic": "^5.13.0",
    "@ionic-native/in-app-browser": "^5.13.0",
    "@ionic-native/insomnia": "^5.13.0",
    "@ionic-native/splash-screen": "^5.13.0",
    "@ionic-native/sqlite": "^5.13.0",
    "@ionic-native/status-bar": "^5.13.0",
    "@ionic/angular": "^4.9.0",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/store": "^8.3.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/d3": "^5.7.2",
    "@types/text-encoding": "0.0.35",
    "angular": "^1.7.8",
    "cordova-android": "8.0.0",
    "cordova-ios": "5.0.1",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-ble-central": "1.2.2",
    "cordova-plugin-compat": "1.2.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-inappbrowser": "^3.1.0",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "2.2.0",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^3.3.0",
    "cordova.plugins.diagnostic": "^5.0.0",
    "core-js": "^3.2.1",
    "d3": "^5.12.0",
    "i": "^0.3.6",
    "lodash": "^4.17.15",
    "npm": "^6.11.3",
    "rxjs": "^6.5.3",
    "tslib": "^1.10.0",
    "zone.js": "^0.9.1"
  }

Any help or insight would be greatly appreciated.

Thanks

1 Like