Ionic-framework: bug: VirtualScroll is resizing while out of view

[PatrykJankowski]

Ionic version:
[x] 5.0.7

Current behavior:
When changing tab or navigate to a different page than the one containing a virtual scroll component, virtual scroll is still running and specifically the part that listens for window resize events. When you resize the window in the other screen for some reason (open keyboard, change orientation, resize browser), that event is triggered in virtual scroll and tries to re-calculate the virtual scroll component.

Expected behavior:
Virtual scroll shouldn't be rendered again.

Steps to reproduce:

• create virtual scroll with list of items in one tab
• go to another tab and open keyboard by clicking on a input
• close the keyboard and go to previous tab
• you can see that virtual scroll is rendering again and you can't see a few first items (and can't scroll up to see them)

Other information:
There was the same bug in the past in Ionic 3: https://github.com/ionic-team/ionic/pull/13143

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[PatrykJankowski]

Yes, I have just created an app to demonstrate this bug.
You can find it here: https://github.com/PatrykJankowski/IonicVirtualScrollBug.git

Run it on Android with Capacitor, go to second tab, click on search bar, close the keybord and go to the first tab again.

[7freaks-otte]

I experience the same issue. It seems to me that the VirtualScroll cannot determine the correct item height while out of view as the first items are all translated to top 0px and thus overlapping.

[7freaks-otte]

As a temporary fix I use this:

ionViewWillEnter() {
    window.dispatchEvent(new Event('resize')); //temporary virtual scroll fix
}

[lincolnthree]

Also experiencing this issue here as well.

[pitamash]

Ensure before virtual-scroll is ion-list and if the list is inside other elements like ion-slide or card or div and not ion-content, add another ion content.

`<ion-content>
    <ion-card> 
         <ion-content>
            <ion-list>
               <ion-virtual-scroll>

                </ion-virtual-scroll>
             </ion-list>
        </ion-content>
   </ion-cord>
</ion-content>`

Here was my implementation adding another ion-content instead of any other element worked.

<ion-content>
  <ion-slides>
     <ion-slide>
       <ion-card>
          <ion-content>  // THIS WAS IMPORTANT
              <ion-list>  
                 <ion-item-divider>    </ion-item-divider>
                     <ion-item-group class="ion-no-padding">  
                         <ion-virtual-scroll [items]="mydataarr" approxItemHeight="80px">
                              <ion-item *virtualItem="let p" itemHeight="80px">