Angular 4 Animationen funktionieren nicht mit Safari iOS 9.3

Question

Ich teste gerade meine App in allen möglichen Browsern und habe festgestellt, dass sich die Winkelanimationen in Safari iOS 9.3 nicht wie erwartet verhalten. Nach Stunden und Stunden, die versuchen, es zu lösen, komme ich um Hilfe in der Hand bitten. Danke im Voraus.

Mein Code lautet:

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

Ich habe versucht, mit einer Fiddle zu kommen, aber ich bin nicht in der Lage, den Fehler zu reproduzieren.

Answer 1

Schließlich wird der Fehler wurde ganz zu spezifisch, die ngx-pdf-viewer Bibliothek verursacht wurde dieser Fehler zur Zeit die Komponente des Ladens.

Was ich getan habe, um es zu lösen, war die Komponente dynamisch nur zu kompilieren, wenn der Benutzer im Desktop ist, und ich nahm einen anderen Ansatz für mobile.

Mein Code:

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

versuchen, Ihr Paket mit dieser Version Herabstufung

"@angular/animations": "4.0.2" 

Answer 3

Die Webanimationen API eine polyfill auf Safari erfordert, glaube ich. Und es ist nicht standardmäßig aktiviert. Sie müssen nur das Polyfill installieren und dann eine oder zwei Zeilen zur Datei polyfills.ts im Ordner/src Ihrer App hinzufügen.

Siehe hier: How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

(Kopieren die beste Antwort unten)

die polyfill mit der neueren, Webpack Version von Angular CLI ist einfacher Hinzufügen:

mit Install

npm install web-animations-js --save 

Zum polyfills.ts hinzufügen:

Es funktionierte auch wenn ich

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

Answer 4

Die Quelle dieser Ausgabe ist NGX-pdf-Viewer auf einem alten 1.x-Version von Pdf.js abhängig, die falsch Web-Animationen auf allen Versionen von iOS polyfills (https://github.com/mozilla/pdf.js/blob/6521d2fd941f26a1b7ae9b97f71842e49f5ff241/src/shared/compatibility.js#L571-L575). Dies wurde gemacht, um einen Fehler in älteren iOS-Versionen zu beheben, verursacht jedoch neuere iOS-Versionen, die einen funktionierenden requestAnimationFrame zum Brechen haben.