在已编译的 Cordova 应用程序上随机替换图标,Android 7.0 WebView

Icons randomly replacing one another on compiled Cordova app, Android 7.0 WebView

我正在开发使用 jQuery Mobile 的 Cordova 移动应用程序。在此应用程序中,我们使用 Font Awesome 库中的图标创建了按钮。在 Chrome 中,一切都很好——图标显示正常。但是,如果我们编译该应用程序并在我们的 Android 测试设备上 运行 它,那么图标将开始随机替换同一页面上的其他图标。

如果我们使用 Chrome DevTools 检查页面,而移动应用 运行 在 phone 上运行,图标会在桌面检查器上正确显示,但在移动设备。

这是正确显示图标的屏幕截图。这是来自 Chrome DevTools 检查移动应用程序 运行ning 在移动设备上.

这是从设备截取的同一屏幕的截图。 我用红色标出了图标的不同之处。

更中肯的观察和事实:

  1. 我们的主要测试设备是 Samsung S7s 运行ning Android 7.0 -- 所有这些设备都有同样的问题。

  2. 在我们更改页面几次之前,图标不会开始相互替换。

  3. 替换的图标不一致。每次我们启动应用程序时它都会有所不同。一个被替换了一次的图标下次可能会保持原样。

  4. 这个问题不会出现在我们较旧的 Android 测试设备上(Droid Razr Maxx HD 运行ning Android 4.4.2) .

  5. 我尝试重新编译应用程序并删除 android-targetSdkVersion,设置为 22 并设置为 25。在所有情况下,图标会继续在较新的 Android 上随机交换。

  6. 我们已将 cordova-android 升级到最新版本(撰写本文时为 6.2.3),问题仍然存在。

  7. 如果我使用Chrome DevTools手动删除Font Awesome图标CSS class(例如fa-user-plus)然后重新添加再次点击,图标将正确显示在设备上。

  8. 我们注意到,有时(如您在下面的屏幕截图中所见)一条小白线可能会出现在已替换的图标下方。

有谁知道这可能是什么原因造成的?关于 Chrome DevTools 如何显示一件事而设备显示另一件事的任何理论也会有所帮助。

我在同一应用程序上调试一个单独的问题时偶然发现了这个问题的解决方案,当我在移动设备上滚动时 position:relative 元素会消失。

虽然我没有在 iPad 上进行测试,但此问题中提供的解决方案 iPad Safari scrolling causes HTML elements to disappear and reappear with a delay 解决了这两个问题。

我所做的是将 -webkit-transform: translate3d(0,0,0) 应用于 class .ui-btn(按钮的 jQuery 移动 class)。重新编译后,图标将不再随机交换。

我不太明白为什么 -webkit-transform: translate3d(0,0,0) 修复了这个明显的 WebView 渲染错误。如果哪位有更深入的了解,欢迎留言!