Ionic 4 Cordova On Android Device - Images go blank on navigating back

Ionic Native
#1

Recently we noticed in our app (may be after we updated the project to latest Ionic/Angular) that, on some devices <Ion-card> shows an unintended ugly thick gray border (see the reason and workaround we came up with, below) and also on home page images go blank after app navigates back to home from second level navigation. Just to emphasize, the issue arises on particular devices which are listed in detail.

To showcase the issue I created a basic app with following commands :

ionic start
// (chose -sidemenu for template)

Project bootstraps and also shows warning regarding upgrading to core-js 3.0.
Started VS Code and issued following commands in terminal:

npm update core-js
ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview
cordova platforms add android
ionic info
Ionic:

   Ionic CLI                     : 5.2.1 (C:\Users\sanjay sharma\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.5
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   Android SDK Tools : 25.2.5 (C:\Program Files (x86)\Android\android-sdk)
   NodeJS            : v12.6.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

cordova plugins list

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

I ran the app on android device with

ionic cordova run android --livereload

Following is the recorded screen on my device. The recording first shows device info and then Ionic SideMenu Starter app is fired. In the app, image shows up fine on Home in the card but when navigated to List page and back, the image disappears and the card background goes transparent.:

com-video-to-gif
com-video-to-gif600×1067 3.55 MB

Notice, the device info: Android Version is 6.0.0, the Ionic Webview supports all version above 4.X. If it’s important the device is Vivo 1601 and the resolution is 780X1280 and Android System Webvie is latest - 78.0.3904.108.

The example has same issue on two different devices - Vivo 1601 (780X1280) and Lenovo K5 Note(1080X1920). App works fine on MotoG Plus (1080X1920). Also, the HTML renders perfectly in the browser on PC.

A quick inspect in browser reveals the reason of ion-card-content going blank:

.sc-ion-card-md-h {
   --background: var(--ion-item-background,transparent);
  /* ...more properties */
}

In our app, to get rid of <ion-card-content> going blank, as a quick and ugly workaround, we have introduced a global css (our app has many cards on different pages)

ion-card ion-card-content{
	background-color: #ffffff !important;
}

With the above workaround <ion-card>s do not go blank but following problems are still there:

  • Images going blank (as in example above)
  • Popovers going blank (this is special, when popover is shown, the items in the list in popovers flash for a moment and then go blank, but when there is touch anywhere inside the popover, till the touch is continuing, the items appear fine and as soon as touch is released, items go blank again)

I think the issues related to appearing/disappearing of images/items are related. ionic doctor check says everything is ok.

My questions are (currently we are looking to get things working on Android, iOS may not be immediate need) :

  • Are these issues related to ionic-webview?
  • If yes, is there any workaround? Downgrade? (want to avoid the downgrade)
  • Version mismatch of some Ionic packages?
  • If version mismatch could be the problem, how can we clean up and update all dependencies?
  • If the issues is not related to ionic-webview or version mismatch, should we look somewhere else for the solution?

UPDATE 2019-12-10T16:50:11Z

  • From the startup project above, cleaned up List Page and added simple list (You can find all Ionic code on my stackblitz)
  • Added another page with simple list but added an ion-icon with each item.
  • Added a simple div styled like an ion-card.

Please refer to the GIF below (screen capture on Vivo 1601) for following observations:

  • When app starts and popover is opened, the popover opens fine.
  • When “LIST w/o ICONS” is opened and navigated back to home, see popover and ion-card are fine.
  • When “LIST WITH ICONS” is opened and navigated back to home, see popover goes blank and ion-card’s image gets messed up. Notice that plain div is still fine.
  • The difference between two lists is ion-icon with each item. Since ion-icon is an svg, is the svg creating problem?
  • If I open the stackblitz app directly on my phone browser, it works as expected without any problem.

com-video-to-gif%20(1)
com-video-to-gif%20(1)600×1067 3.76 MB

#2

Did it works on browser or also go blank there after navigating?

#3

So sorry for late reply, I was travelling.

In the browser and in newer Android devices (Nougat and Oreo) the app is working as expected, no problem. On Lollipop and Marshmallow it exhibited the erroneous behavior.

I am not sure it this thread is related since it’s very old post. See first comment by yuankunluo

Cordova-ionic-webview plugin does not work well on Android under version 7.0 . Because Android system webview on these devices are outdated. This is a big problem for us, Android 6 is currently the most popular Android OS

And also the second last comment by mhartington

We are aware of this issue and have been working to fix it for some time. The main issue here is that there seems to be a constant stream of things that need to either be polyfill or reworked in order to support older Android. And to add to this, the android emulator is not always the best test ground

#4

I’m having similar issue with @ionic/angular@^5.0.7 and Android 10. When I return from some screen to home screen the ion-img goes blank. I thought this was somehow related to ion-card, I’ve removed the image from the ion-card and put directly on ion-content. Problem still persists. I will dig a little bit more, If I found something I’ll post it here.

#5

The only workaround I’ve found so far:

on html:

<img #img style="width: 100%" src="assets/img/img.jpg">

on ts:

class MyComponent {
    @ViewChild('img', null) img: any;
    constructor(private platform : Platform) {}

    ngAfterViewInit() {
        /* ugly workaround to fix images going blank on android */
        if(this.platform.is('android')) {
            console.log('swaping image');
            let img = new Image();
            img.style['width'] = '100%';
            img.src = "assets/img/img.jpg";
            this.img.nativeElement.replaceWith(img);
        }
    }