Ion Virtual Scroll Overlapping Items

Ionic Framework
1

Hello, I have problems with ion-virtual-scroll, I have seen that an already well known problem and I am trying to fix it.

Among the solutions proposed on git (see link) there is that of using:
window.dispatchEvent (new Event ('resize'));

But I am not clear how it is used and as a function, it is the only one I think I can consider because whoever proposed it was in the case in which the height of the item is not defined but various from item to item (as in my case).

I want to clarify that the list is very large (500 items) and it happens 1/2 every 50 items more or less and not always, both on Android and on iPhone.

Inside each item there is an ion-card> ion-grid> 2/4/5 ion-row, so each item have different height.

To solve do I have to use ion-list? Or use Angular’s virtual-scroll?

Please help me!

01
01591×1280 88.8 KB
02
02591×1280 88.8 KB

2

Try adding approximate height to the one that is highest. Ion list has a rendering issue if you have a long list and virtual scroll does not support ion-grid I think.

3

I add approxItemHeight but it didn’t solve the problem. I have high items from 250px to 430px.

What is the better solution in my case? Ion-list or Virtual Scroll From Angular?