Umwandlungseigenschaft Nicht unterstützt von Cordova

Question

Ich baue eine Apache Cordova App mit dem Ionic Framework und baue mit Phonegap Build. Auf der Hauptseite meiner app habe ich ein paar Zeilen von Symbolen, die wie folgt aussehen:

Mein Problem ist, dass auf Android 4.4.x und unten, werden die Symbole verschoben. Ich habe es eingegrenzt und festgestellt, dass mein transform: translate(-50%, -50%); nicht auf älteren Geräten funktioniert. Es scheint, als hätten andere Menschen die same issue.

Wie mache ich diesen Transformationseffekt, so dass es von allen Geräten/Webviews/Browsern unterstützt wird?

Answer 1

Das Problem ist nicht mit Cordova, aber mit der Rendering-Engine des Webview. Versuchen Sie, mit einem Anbieter Präfix Version:

 transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 

Answer 2

auf der sicheren Seite zu sein, verwenden alle Anbieter Präfix Version

transform: translate3d(-50%, -50%); 
-ms-transform:translate3d(-50%, -50%); 
-o-transform: translate3d(-50%, -50%); 
-webkit-transform: translate3d(-50%, -50%); 
-moz-transform: translate3d(-50%, -50%); 

Auch translate3d verwenden statt übersetzen. translate erzwingt die CPU, css zu rendern, während translate3d die GPU Ihres Telefons verwendet, um Ihre Transition/Animation glatter zu machen