Animacje Angular 4 nie działają z Safari iOS 9.3

Question

Obecnie testuję swoją aplikację we wszystkich możliwych przeglądarkach i widzę, że animacje kątowe nie zachowują się zgodnie z oczekiwaniami w Safari iOS 9.3. Po godzinach i godzinach próbujących go rozwiązać, przychodzę prosić o pomoc w ręce. Z góry dziękuję.

Mój kod brzmi:

package.json

"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" 
}, 

landing.component.ts

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') ''; 
} 

routing.animations.ts

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 => *', animate('.5s 500ms')), 
    // exit animation 
    transition('* => void', animate('.5s')) 
    ]); 
} 

Próbowałem wymyślić Fiddle ale nie jestem w stanie odtworzyć błędu.

Answer 1

Wreszcie błąd został dość zbyt szczegółowe, biblioteka ngx-pdf-viewer było przyczyną tego błędu w momencie wczytywania komponentu.

To, co zrobiłem, aby go rozwiązać, to dynamiczne kompilowanie komponentu tylko wtedy, gdy użytkownik znajduje się na pulpicie i zastosowałem inne podejście do urządzeń mobilnych.

Mój kod:

const template = '<pdf-viewer [src]="src"' + 
       '   [show-all]="true"' + 
       '   [zoom]="2">' + 
       '</pdf-viewer>'; 

const tmpCmp = Component({template: template})(class {}); 
const tmpModule = NgModule({ 
    declarations: [tmpCmp, PdfViewerComponent], 
    imports: [CommonModule]} 
)(class {}); 

this._compiler.compileModuleAndAllComponentsAsync(tmpModule) 
.then((factories) => { 
    const f = factories.componentFactories[0]; 
    const cmpRef = f.create(this._injector, [], null, this._m); 
    cmpRef.instance.src = this.data.src; 
    this.pdfViewerContainer.insert(cmpRef.hostView); 
}); 

Answer 2

Spróbuj przez obniżenie pakiet z tą wersją

"@angular/animations": "4.0.2" 

Answer 3

animacje Web API wymaga PolyFill na safari, wierzę. I nie jest domyślnie włączona. Musisz tylko zainstalować polyfill, a następnie dodać wiersz lub dwa do pliku polyfills.ts w folderze app/src.

Zobacz tutaj: How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

(kopiowanie najlepszą odpowiedź poniżej)

dodanie PolyFill z nowszych, WebPACK wersji kątowej CLI jest łatwiejsze:

Instalacja z

npm install web-animations-js --save 

Dodaj do polyfills.ts:

require('web-animations-js/web-animations.min'); 

Udało się także, jeśli to zrobię

import 'web-animations-js/web-animations.min'; 

Answer 4

Źródłem tego problemu jest NGX-pdf-viewer zależności od starej wersji 1.x z PDF.js który nieprawidłowo polyfills web-animacje we wszystkich wersjach iOS (https://github.com/mozilla/pdf.js/blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575). Zrobiono to, aby naprawić błąd w starszych wersjach iOS, ale powoduje to, że nowsze wersje iOS mają działającą requestAnimationFrame do zerwania.