2017-01-06 163 views
0

我正在用Ionic框架构建Apache Cordova应用程序,并使用Phonegap Build进行构建。在我的应用程序的主网页我有这个样子的图标,一对夫妇行:Cordova不支持的Transform属性

enter image description here

我的问题是,从Android 4.4.x及以下的图标被移动。我缩小了范围,并意识到我的transform: translate(-50%, -50%);在旧设备上不起作用。看起来像其他人似乎same issue.

如何做这种变换效果,以便它是由所有设备/ webviews /浏览器支持?

回答

1

问题不在于Cordova,而在于webview的渲染引擎。尝试与供应商前缀版本:

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

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

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代替翻译。翻译强制CPU渲染css,而translate3d使用您的手机GPU使您的过渡/动画更加流畅