Cordova Webview -webkit-backface-visibility 不工作答案

【问题标题】：Cordova Webview -webkit-backface-visibility not workingCordova Webview -webkit-backface-visibility 不工作
【发布时间】：2014-03-17 04:03:22
【问题描述】：

我使用最新版本的 Cordova 创建了一个简单的 Android 应用程序，并将 www 文件夹的内容替换为 Igor Minar 在 Github (https://github.com/IgorMinar/Memory-Game) 上编写的记忆游戏的示例代码。问题是封面图像（正面）不显示。卡片始终显示两面的内容图像（背面）。然后，我创建了一个没有 Cordova 的新 Android 应用程序，但使用了一个简单的 android.webkit.WebView，一切都按预期工作，具有类似的 www 内容。我认为这是 Cordova Webview 的问题。我想使用 Cordova，因为它是一个很好的 SDK，所以我想问是否有人可以给我一个解决这个 webview 问题的方法。提前致谢。

【问题讨论】：

告诉我你做了什么。
1.我运行 cordova cli 命令来创建 android 项目 2。我使用示例 app\index.html 中的代码更新了 index.html 文件，以启用 AngularJS 并显示卡片。 3.我从示例中复制了必要的css，js，lib文件并放入assets\www文件夹中的相应目录中。 4.运行应用时，只有-webkit-backface-visibility不工作；变换效果很好。
我在 iOS 上测试过，这个 css 属性工作正常。所以我相信这个问题只发生在 Cordova for Android 上。我测试了几个 Android 版本：从 3.0 到 4.3，同时使用模拟器和真实设备，但它们都遇到了这个问题。
有什么更新吗？我在 4.4+ 版本的 android webview（不是特别是cordova）上遇到了同样的问题（因为它是 chromeview，所以它就像一个魅力）

标签： android cordova webview css-transforms

【解决方案1】：

经过长时间的使用这个网站的实验：http://thewebrocks.com/demos/3D-css-tester/
(source code on github) 并基于@nguyen-canh-linh 的代码，即使在 Android see on his repository) 中，他也设法开始工作

我发现你不能在同一个类中有两个 css 属性动画 - 但我知道这一事实（我在 Internet 上读到的一个错误） - 我没有意识到最近需要避免闪烁的技巧webkit 版本即：* { transform: translate3d(0,0,0); } 确实被视为动画并触发错误

注意：还要注意：backface-visibility: hidden; 不要将其应用于每个元素 (*)，它也可能是错误的。

【讨论】：