Android 8.1 Icons not displaying

We’ve had a flood of recent complaints about our Ionic 5 / Capacitor app not working correctly on the Android device Sony Xperia L3 (running Android 8.1). I finally got hold of one of these devices today and from a factory reset (where the version of Chrome is 70.0.3538.110) our app works fine. But as soon as the app updates Chrome to the latest version (91.0.4472.101) the app behaves very strangely - some weird very glitchy things happen and the app is unusable.

Other devices that are on 91.0.4472.101 are working fine - but this particular device (on Android 8.1) does not.

Has anyone else seen anything similar? And what are the obvious things to look at that might fix the issue?

I’m wondering if it’s related to what I have in the variables.gradle file which is currently:

ext {
    minSdkVersion = 21
    compileSdkVersion = 30
    targetSdkVersion = 29
    androidxAppCompatVersion = '1.1.0'
    androidxCoreVersion =  '1.2.0'
    androidxMaterialVersion =  '1.1.0-rc02'
    androidxBrowserVersion =  '1.2.0'
    androidxLocalbroadcastmanagerVersion =  '1.0.0'
    androidxExifInterfaceVersion = '1.2.0'
    firebaseMessagingVersion =  '20.1.2'
    playServicesLocationVersion =  '17.0.0'
    junitVersion =  '4.12'
    androidxJunitVersion =  '1.1.1'
    androidxEspressoCoreVersion =  '3.2.0'
    cordovaAndroidVersion =  '7.0.0'
}

Unbelievably I have tracked down the problem on this 8.1 device (only when running the latest version of Chrome) to this:

On my side-menu item labels I have:

<ion-icon [name]="option.icon" slot="start"></ion-icon>

This doesn’t work - the menu appears blank and the app goes really weird!

If I change it to this it works:

<ion-icon name="mail-outline" slot="start"></ion-icon>

Does that make any sense to anyone? !!!

Hey @richardshergold, is this only something you’re seeing on a device or could any chrome browser replicate it?

1 Like

Thanks for having a look Mike. I’ve only seen this on the Sony Xperia L3 running Android 8.1 and only after updating to the latest version of Chrome. There could be other devices of course but that’s the device we have had problems with. App is Ionic 5 / Angular 10 / Capacitor 2

I’ll see what I can emulate as I don’t have that device specifically. But if you open up the chrome devtools, can you see if there are any errors being printed?

1 Like

I did have an error originally but that seemed to disappear when I set the androidxCoreVersion to 1.5 in that file I mentioned above. I then just started adding some items to a list (by trial and error really) to see what was going wrong (my side menu was blank) and I eventually found that binding the name of the icon to data was what was causing the problem. If I bind the name, nothing appears. If I hardcode an icon name it works. And this is ONLY once Chrome has updated to the latest version. It works fine on that device after a factory reset i.e before the Chrome update.

Ionic Info in case it helps Mike:

Ionic:

Ionic CLI                     : 6.16.2 (/Users/richardshergold/.nvm/versions/node/v12.16.2/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.9
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.2.3
   @angular/cli                  : 10.2.3
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI      : 2.4.7
   @capacitor/android : 2.4.7
   @capacitor/core    : 2.4.7
   @capacitor/ios     : 2.4.7

Utility:

   cordova-res (update available: 0.15.3) : 0.12.2
   native-run (update available: 1.4.0)   : 1.0.0

System:

   NodeJS : v12.16.2 (/Users/richardshergold/.nvm/versions/node/v12.16.2/bin/node)
   npm    : 7.17.0
   OS     : macOS Catalina

Mike, I’ve done more digging into this today and it’s not a data binding issue at all. It’s simply an issue with the icon names I am using. So in our app I have some icons with names like “mail” and “star” (these are probably your old icon names). If I change the “mail” one to “mail-outline” it works fine regardless of whether it’s name is bound to data or not). So I think this is easily fixable from our end as long as I make sure I now use all the up to date icon names.

I’ve no idea why the Chrome update does not like this though whereas the older version of Chrome did?

Actually those icons should still work - they are the filled ones, it seems like the errors go away if I make them outlined i.e if mail becomes "mail-outline” it works but “mail” should still work as a filled icon?

Mike, I changed all my app icons to have “-outline” but unfortunately some of them do not work and the app becomes unusable. “people-circle-outline” for example causes a problem.

Does this make sense to anyone on your side? ! I’m wondering if this person is experiencing the same issue?

“card-outline” is another one that does not work

I’m finding a lot of icons that cause the issue unfortunately

WARNING: totally unfounded speculation from here on out. Feel free to ignore.

This smells like an uncaught exception somewhere to me. A complete WAG of somewhere to look might be fetch, as it’s used internally by <ion-icon> and has been involved in several Chrome issues (e.g. 1098389).

I’m also wary that the search for specific icons that trigger the problems might be an apophenic mirage, where we are instead looking at a less deterministic problem. For example, at a glance I can’t see any substantial difference between the process that would try to load the mail icon as opposed to the mail-outline one.

1 Like

But what would explain the app working absolutely fine if I replace every icon name with, say, “mail-outline” and as soon as I change one of them to one of the icons that fails, it stops working?

To answer your specific question directly, “luck of the draw”.

See getSvgContent in the Ionicons source.

Now, I’ve only glanced at this, but it looks like there is a map of urls (which I’m considering to be a 1-to-1 proxy for “icon names”) to “Promises spawned by fetch requests”. So let’s assume that there is some mysterious fetch bug that gets tickled by the name of the icon, or some odd phase-of-the-moon thing. When it bites, fetch returns a rejected Promise, which would be dutifully saved for future annoyance.

Further assume (yes, I realize the limb I’m climbing out on is rather narrow here) that other bits of the Ionicons library are not set up to deal with burnt Promises coming out of here, and will toss a “unhandled Promise rejection”-shaped monkey wrench into your rendering task when they get one.

Once there’s a burnt Promise in that cache, I think that cache logic will keep it from ever being retried - it will simply be trotted out again and again.

I don’t see any code paths that deal with what happens if getSvgContent fails. Perhaps I’m not looking in the right place, or perhaps Stencil has some scaffolding that deals with this.

EDIT: Furthermore, let’s say you have 60 different icons in play typically. That’s 60 rolls of the dice where one failure will send you into the failed state. Changing all 60 to the same icon reduces your exposure to a single roll, so you’d typically see a correspondingly exponential backoff of the problem.

1 Like

Hmm, ok thanks for that. I will do a bit more digging today (I’m in the UK) and see if I can find any more clues - thanks for having a theory!

I’ve got to get a fix out (assuming there’s no magical Chrome update that fixes this for these devices in the coming days). The only fix I have for this right now is to replace any icons in the app that cause an error with ones that seem to work, which obviously isn’t great - my current tests are showing quite a few icons that don’t work.

I’m assuming this issue with the latest version of Chrome and Ionic is only limited to certain Android 8.1 devices (the majority of which appear to be Sony Xperia L3 users so far).

A bit more digging. First of all, when the app starts up there is an error (I thought I had got the app to run without this error by updating the values in my variables.gradle file but I obviously didn’t as it is appearing now, maybe I had missed it earlier). The error is:

E/WebViewFactory: No such method for getDefinedWebViewPackageName: java.lang.NoSuchMethodException: getDefinedWebViewPackageName []

(not sure if that error is connected to this issue though)

Secondly, I have just tested the side-menu with a bunch of icons that work and one icon that doesn’t (placed at the top of the menu) and although the menu appears completely blank, if you touch it and try and scroll the icons that are not affected appear. And the icon that causes the problem (in my case the “mail” icon) starts to appear as a very large black circle. And then as you continue to scroll up and down things become very clunky with this large black circle icon appearing, half-appearing, disappearing etc.

Also when I inspect the app in Chrome (i.e using chrome://inspect/#devices) everything appears to be fine i.e the menu shows ok on there.

Also I just opened Chrome on the problematic device and went to Ionic’s icon page (ionic.io/ionicons) and none of the icons display (see screenshot). So at least that rules out my app in any way being the cause.

When I inspect the device as it is doing the above I see some violation messages in the console but no errors

I think this is probably the same issue occurring here