ionic-framework: bug: 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 56 (10 by maintainers)

Most upvoted comments

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;
  }
}

+20

lincolnthree on Jul 11, 2019

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

lincolnthree on Jul 9, 2019

Could everyone please try Ionic 5.0.0-rc0 and let me know if it fixes the issue? I’ve been trying it in a few examples apps provided in this thread and the issues appears to be fixed in that version.

liamdebeasi on Jan 27, 2020

I’ve had the same issue in the Chrome browser (random images in ion-img not loading) and can confirm that min-height: 1px !important; workaround worked for me also.

codyburleson on Nov 9, 2019

Thanks for checking! I will close this as it sounds like the issue is resolved. If anyone is still running into this issue please reply here with a reproduction case.

liamdebeasi on Nov 29, 2022

Works with an updated webview right now API 22 can update up to webview 95 and 23 up to webview 106 stock is 44. Probably on real devices webview will be updated. So yeah probably safe to close this.

andrei0x309 on Nov 24, 2022

This also happens with standard tags. I had to apply the same fix to get it to work when loading a regular image.

:root {
  img{
    min-height: 1px !important;
  }
}

See https://github.com/SimonGolms/ngx-ionic-image-viewer/issues/41. This is where I came across this issue. It only happens on Android.

selected-pixel-jameson on Aug 19, 2020

ionic 5.0.1 it not correct working in custom horizontal scroll

ebeliejinfren on Feb 23, 2020

I have a similiar issue — on some page loads the <ion-img> child’s <img> elements don’t get their src, although they are in viewport. If I start to scroll around, the images appear when entering the viewport.

It could have something to do with tabs or the column layout CSS I’m using, but not 100% what causes it yet. I have added the mentioned min-height workaround but that didn’t help.

It can be semi-reliably replicated in https://draugsapp-dev.web.app/, just hit refresh a few times. Source code is available at https://github.com/armn/draugs/tree/fa2bdf8bb18d3299f8e6c794ece071669fe69482

armn on Jan 15, 2020

Hey guys, I have seen this issue with my app as well. I will try to deploy it to live environment on Friday this week and have you access it and can share code as well if no one will provide example. But yes I confirm randomly images are not loading.

Will try min-height trick

cmer4 on Jul 16, 2019