title: Angular 4 animations not working with Safari iOS 9.3
body: <p>I'm currently testing my app in all the possible browsers and I got to see that the angular animations don't behave as expected in Safari iOS 9.3. After hours
  and hours trying to solve it I come asking for a help in hand. Thanks in advance.</p>
  
  <p>My code reads:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "^4.3.2",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "@ngx-meta/core": "^0.4.0-rc.2",
      "@ngx-translate/core": "^7.1.0",
      "@ngx-translate/http-loader": "^1.0.1",
      "angular2-moment": "^1.6.0",
      "core-js": "^2.4.1",
      "express": "^4.15.4",
      "lodash": "^4.17.4",
      "ng2-pdf-viewer": "^1.1.1",
      "ng2-translate": "^5.0.0",
      "rxjs": "^5.4.1",
      "web-animations-js": "^2.3.1",
      "zone.js": "^0.8.14"
  },
  </code></pre>
  
  <p><strong>landing.component.ts</strong></p>
  
  <pre><code>import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';
  import { stateTransition } from '../routing.animations';
  
  @Component({
    selector: 'cp-landing',
    templateUrl: './landing.component.html',
    styleUrls: ['./landing.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations: [ stateTransition() ]
  })
  export class LandingComponent {
    @HostBinding('@stateTransition') '';
  }
  </code></pre>
  
  <p><strong>routing.animations.ts</strong></p>
  
  <pre><code>import { trigger, state, animate, style, transition } from '@angular/animations';
  
  export function stateTransition() {
    return trigger('stateTransition', [
      state('void', style({
        transform: 'translateY(50%)',
        opacity: 0
      })),
      state('*', style({
        transform: 'translateY(0%)',
        opacity: 1
      })),
      // enter animation
      transition('void =&gt; *', animate('.5s 500ms')),
      // exit animation
      transition('* =&gt; void', animate('.5s'))
    ]);
  }
  </code></pre>
  
  <p>I tried coming up with a Fiddle but I'm not being able to reproduce the error.</p>