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.:
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.
