Cordova 不支持的转换属性答案

【问题标题】：Transform Property Unsupported by CordovaCordova 不支持的转换属性
【发布时间】：2017-01-06 15:53:52
【问题描述】：

我正在使用 Ionic 框架构建一个 Apache Cordova 应用程序，并使用 Phonegap Build 进行构建。在我的应用程序的主页上，我有几行如下所示的图标：

我的问题是在 Android 4.4.x 及更低版本上，图标被替换了。我缩小范围并意识到我的transform: translate(-50%, -50%); 不适用于旧设备。好像其他人有same issue.

我如何做这种变换效果，以便所有设备/webviews/浏览器都支持它？

【问题讨论】：

标签： javascript android css cordova ionic-framework

【解决方案1】：

问题不在于 Cordova，而在于 webview 的渲染引擎。尝试使用供应商前缀版本：

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

【讨论】：

【解决方案2】：

为了安全起见，请使用所有供应商前缀版本

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

同时使用 translate3d 代替 translate。 translate 强制 CPU 渲染 css，而 translate3d 使用您的手机 GPU 使您的过渡/动画更流畅

【讨论】：