VirtualScroll approxItemHeight weirdness

Ionic Framework ionic-v3
1

My VirtualScroll array has 348 items.
If I set the approxItemHeight to anything larger than 5px, not all the images load.
Setting it 5px or 2px and it works.
The higher the number, the less images load.

I am using the default ion-item with ion-avatar and ion-img.
Is this a known problem or am I doing something wrong?

Should VirtualScroll be left alone for now until it is revamped?

Sample here:

<ion-list [virtualScroll]="items" [virtualTrackBy]="customTrackBy" [approxItemHeight]="'50px'">
    <ion-item *virtualItem="let item">
        <ion-avatar item-left>
            <ion-img [src]="item.imageURL"></ion-img>
        </ion-avatar>
        {{ item.name }}
    </ion-item>
</ion-list>

I have tried with and without virtualTrackBy.

1 Like
2

I’m having the same problem here. My virtual scroll was ok, but after updating ionic to the latest version the “ion-img” stopped loading correctly.

If you change “ion-img” to “img” it works, but lost the benefits of using ion-img.

3

Hi ibnclaudius, have you tried, for experimentation, setting the approxItemHeight to something low like 5px?

4

Yes, did not worked for me.

5

Did you solve it? The problem is in ion-img, I’m having trouble with this on other components as well. Did you report the bug somewhere or did you get a response from someone on the ionic team?

6

I stopped using VirtualScroll for now.

7

Have a look on github, there are a bunch of issues for virtualScroll and ion-img there. virtualScroll took some big steps forward in RC4 but also still has a bunch of issues. Hopefully the ionic team can take the rough edges off it soon!

8

I am experiencing this weird behavior too.
Does any one know if this issue has ever been fixed or if there is a work around?