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

Question

I'm working on a Cordova mobile app that uses jQuery Mobile. On this app, we've created buttons using icons from the Font Awesome library. In Chrome, everything works great -- the icons appear as they should. However, if we compile the app and run it on our Android test devices then the icons will start to randomly replace other icons on the same page.

If we use Chrome DevTools to inspect the page while the mobile app is running on the phone, the icons display correctly on the desktop inspector, but not on the mobile device.

Here's a screenshot of the icons displaying correctly. This is from Chrome DevTools inspecting the mobile app while it's running live on the mobile device.

Here's a capture of the same screen taken from the device. I've indicated in red where the differences in icons are.

More pertinent observations and facts:

1. Our primary test devices are Samsung S7s running Android 7.0 -- all of these devices have this same problem.

2. The icons do not start to replace one another until we've changed pages a couple times.

3. It's not consistent which icons get replaced. It will vary each time we fire up the app. One icon that gets replaced one time might be left untouched the next time.

4. This problem does not occur on our older Android test device (Droid Razr Maxx HD running Android 4.4.2).

5. I've tried re-compiling the app with the android-targetSdkVersion removed, set to 22 and set to 25. In all instances, the icons continue to swap randomly on the newer Androids.

6. We've upgraded cordova-android to the latest version (6.2.3 as of writing) and the issue remains.

7. If I use Chrome DevTools to manually remove the Font Awesome icon CSS class (e.g., fa-user-plus) and then re-add it again, the icon will then display correctly on the device.

8. We've noticed that sometimes (as you can see in the screenshot below) a small white line might appear underneath an icon that has been replaced.

Does anyone know what might be causing this? Any theories on how it's possible for Chrome DevTools to show one thing while the device shows another would also be helpful.

Answer 1

I stumbled across a solution for this problem while debugging a separate issue on the same app where position:relative elements would disappear while I was scrolling on a mobile device.

While I haven't been testing on an iPad, the solution provided in this question iPad Safari scrolling causes HTML elements to disappear and reappear with a delay fixed both issues.

What I did was apply -webkit-transform: translate3d(0,0,0) to the class .ui-btn (the jQuery Mobile class for buttons). After a re-compile, the icons would no longer randomly swap with one another.

I have little insight as to why -webkit-transform: translate3d(0,0,0) fixes this apparent WebView rendering bug. If anyone has a deeper understanding of what's going on, please leave a comment!