ion-img in virtualScroll do not display images as expected

[ionitron-bot[bot]]

Original issue by @kaikcreator on 2017-04-22T23:45:14Z

Ionic version: (check one with "x") [ ] 1.x [ ] 2.x [X] 3.x

I'm submitting a ... (check one with "x") [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: I'm using the ion-img as explained in the DOC, inside a virtualScroll, but the images are not shown in the first moment (grey box only). After a certain scroll, some images appear, and after scrolling a bit more, the images disappear another time.

Expected behavior: The images should be displayed when their element is visible on the screen.

Steps to reproduce:

Go to this plunker: http://embed.plnkr.co/WblnwO8P1lWgFW2TgVc1/

It's a simple contacts list. Scroll a few contacts and you'll see how images are shown.

Related code: As you can see the usage of the ion-img is as suggested in the DOCS:

<ion-content padding>

  <ion-list [virtualScroll]="items" approxItemHeight="100px">

    <ion-item *virtualItem="let item">
      <ion-img style="width:100px; height:100px" [src]="item.imgUrl"></ion-img>
      <span>
        <h1>{{item.name}}</h1>
        <p>{{item.phone}}</p>
      </span>
    </ion-item>

  </ion-list>

</ion-content>

Other information: For what I've been investigating, in the updateImgs function, in content.js file, the img.top value of all ion-images is the same (the position of the last one, something like 1900px). Same happens with the img.bottom (in fact, the problem is img._bounds).

That's the reason why at some point of the scroll the images are shown, because at that moment the bounds of the img are between viewableBottom and viewableTop - renderableBuffer.

Anyway, the problem is that in the _getBounds method of img.js, there's no this._bounds neither this._rect properties so the later is computed (and the result used from that moment forwards). When this value is computed, the value of the bounding client rect of each element is not the final one.

IMO the problem is that, some way, the bounds of the ion-img should be related (they are not, at this moment) with the bounds of the virtual scroll nodes (the ones that are updated in the function updateNodeContext() of virtual-util.js).

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0

[Hanzofm]

Same problem, any solution?

`Ionic:

ionic (Ionic CLI) : 4.0.2 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.10

Cordova:

cordova (Cordova CLI) : 8.0.0 Cordova Platforms : android 7.1.4

System:

Android SDK Tools : 26.1.1 ios-deploy : 1.9.2 ios-sim : 6.1.2 NodeJS : v9.9.0 (/usr/local/bin/node) npm : 5.7.1 OS : macOS High Sierra Xcode : Xcode 9.4.1 Build version 9F2000

Environment:

ANDROID_HOME : /Users/juanramos/Library/Android/sdk

`

[fdambrosio]

@Hanzofm there's no solution yet, you can read all history : https://github.com/ionic-team/ionic/issues/11326

[Hanzofm]

In my case when I combine infinite scroll with virtual scroll causes the problem, when I add items to the original array of virtual scroll, the ion-imgs of the new added items dont work as expected.

[jratiwanich]

In my case, I have base64 images in the array (100-200 in length). With Virtual Scroll or without, some of my images still not showing on the screen. I inspect the HTML element and I can see my image data in every element. This bug is really annoying.

Has anyone find a better solution?

[richardsabow]

I've put ion-virtual-scroll inside an ng-container with ngIf to show it only if items are loaded, and also added a min-height for the images in css. This seemed to help in my case.