bug: <ion-img> not appearing since 4.6.* (worked in 4.5.x)

Bug Report

Ionic version: [x] 4.x

Current behavior:

Currently, the <ion-img> tags do not load when they are initially loaded in the viewport. They also do not reliably load when they are scrolled into the viewport from offscreen. I’m assuming something is broken with the load trigger in 4.6.x/Stencil One.

The strange part is that it works fine in Electron / Capacitor, but does not load on Chrome.

It seems to work a little better on Safari, but I do still see the issue occasionally with random images.

Which images fail to load seems random, but the same images fail each time on refresh, so that makes me think there’s something pseudorandom going on. Not 100% random.

Expected behavior:

ion-img should load its image when in the viewport.

Steps to reproduce:

I tried creating a sample app, but could not reproduce the issue. I really don’t know. As I mentioned, the images load fine in Electron/Capacitor, but do not load in native Chrome. And load better in Safari, but not 100%.

insert short code snippets here

Other information:

Ionic info:

Lincolns-MacBook-Pro-2:topdecked-unified lincoln$ ionic info

Ionic:

   Ionic CLI                     : 5.2.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.1-dev.201907052128.7953088
   @angular-devkit/build-angular : 0.800.3
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 8.0.3
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v12.3.1 (/usr/local/Cellar/node/12.3.1/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Tagging issue https://github.com/ionic-team/ionic/issues/18655

[lincolnthree]

Putting this here for others who might run across this problem. Setting a min-height on the ion-img element seems to resolve the issue:

in your global.scss (or other relevant stylesheet):

:root {
  ion-img {
    /** 
     * Bug fix for:
     * https://github.com/ionic-team/ionic/issues/18734
     */
    min-height: 1px !important;
  }
}

[lincolnthree]

@liamdebeasi Okay, I found something interesting. I set a min-height: 1px on the <ion-img> and that appears to have gotten things working. I’m going to do more testing and see if it breaks again.