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

Created on 8 Jul 2019 · 46Comments · Source: ionic-team/ionic-framework

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 ([email protected])
   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

core bug

Source

lincolnthree

👍4

Most helpful comment

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 on 11 Jul 2019

👍14 🎉1

All 46 comments

Here's a video of the issue since I can't seem to reproduce in a sample app, or figure out why some images load but others don't:

https://www.youtube.com/watch?v=PXglOJ6vd3w&feature=youtu.be

When I inspect the ion images in the dom, the image tag itself has not been populated with a src attribute:

Screen Shot 2019-07-08 at 4 44 07 PM

lincolnthree on 8 Jul 2019

Thanks for the issue! Can you test this with the latest dev build of Ionic and see if this fixes the issue you are seeing? npm i @ionic/angular@dev