VirtualScroll dimensions not calculated


I have a page with VirtualScroll where I scroll many images.
I have an ion-menu with a link that calls nav.setRoot(component).

Whenever I’m getting to the page with VirtualScroll via the link in ion-menu, the VirtualScroll’s content is not visible.

It appears in elements but it seems its dimensions are not calculated.

If I’m browsing to the page with VirtualScroll via a normal link that’s not in ion-menu everything works properly.

My guess is it’s somehow related to VirtualScroll being blocked while the ion-menu is open, since I’m changing to the VirtualScroll’s page and only then the menu starts closing while I’m already there.

My VirtualScroll code is very basic, it’s similar to the example shown here:

<ion-list [virtualScroll]="items">

  <ion-item *virtualItem="let item">
    {{ item }}


except I’m using divs for containers and use them to display images.

It seems that the div with class=“virtual-scroll” has style=“height: …px;” when it’s initialized properly on page load.
When I get to that page via ion-menu that style is missing. Same happens when I navigate to that page after being on a different page that also has VirtualScroll.
If I set the style manually via the elements tab in the dev tools I can see the VirtualScroll elements, although spaces and such are no longer calculated properly.

Why does this happen and how do I fix it?