bug: A cached page's virtual-scroll doesn't re-render on window resize (Keyboard or Orientation)

[omardoma]

Bug Report

If you have a route that contains an ion-virtual-scroll, then you navigate forward (So the previous route is cached and reused), if the new current page triggers a resize, then you go back to the cached route, the virtual scroll items will collapse and overlap each others.

Ionic version:
[x] 4.8.1

Current behavior:
An ion-virtual-scroll existing on a cached route doesn't react to screen resizes and it collapses when navigating back to its page.

Expected behavior:

ion-virtual-scroll should react to screen resizes even if its page is not the active one.

Steps to reproduce:
Tabs are affected heavily because all of their views are cached and reused

It happens on all platforms and on both, virtual devices and real devices.

Other information:

#18409

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.7
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 15 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/omardoma/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.15.3 (/usr/local/Cellar/node@10/10.15.3/bin/node)
   npm               : 6.10.3
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

[omardoma]

@manucorporat I think its related to the code merged for #18878, the same bug existed in Ionic 3.8.x and was fixed in Ionic 3.9.0 #13143.

This issue is preventing me from going to production, its very urgent, can you or anyone of the team update us with the status ?

[omardoma]

Guys, its been over two weeks since I have created the issue and have supplied all of the reproducing steps, and even provided a hint on the culprit, nobody seems to be checking any virtual scroll related issues or even commenting with acknowledgements or workarounds.

Its very frustrating not being able to fix a major issue that our production app is facing because of the usage of the virtual scroll that nobody at Ionic seems to give any attention to, while I believe that its one of the most important components in Ionic, as its needed to minimize performance gaps of hybrid apps!

[pseudooriginal]

This is just unbelievable that nobody from Ionic just look at this bug. It is still here in 4.11.2.

[omardoma]

@liamdebeasi Hey, can we please get an update on this issue, Its affecting our production app UX greatly, seems like anything related to virtual-scroll is ignored even though its a critical component for many apps.

[MarkChrisLevy]

@omardoma I also suffer because of that, but until it is fixed you may try following code:

export class YourComponent  {

    private virtualScrollRerender: boolean;

    @ViewChild(IonVirtualScroll, {static: false})
    private virtualScroll: IonVirtualScroll;

    private viewActive: boolean;

    @HostListener("window:resize")
    protected windowResized() {
        if (!this.viewActive) {
            this.virtualScrollRerender = true;
        }
    }

    ionViewDidEnter() {
        this.viewActive = true;
        if (this.virtualScroll && this.virtualScrollRerender) {
            this.virtualScroll.checkRange(0);
            this.virtualScrollRerender = false;
        }
    }

    ionViewDidLeave() {
        this.viewActive = false;
    }

}

The downside of this solution is that scroll position can be different than it was before you left the view, but at least it renders correctly.

[TdoubleG]

3 Month past, and still no comment from ionic devs...

@brandyscarney @adamdbradley

[nikosdouvlis]

This is a show stopped for our team as well. No workarounds for now

[mhartington]

Hey everyone! Just an update here.

We're going to be pushing folks to use Angular's CDK Scroller for virtual scrolling instead of our virtual scroller. A big reason why is that CDK Scroller is a framework maintained solution, therefore support/performance are guaranteed. At this time, we're not going to be pushing fixes for our virtual scroller.

For reference, I put together this repo which uses the Angular CDK scroller and Ionic, and everything was working as expected. Even browser resizing/items not collapsing.

https://github.com/mhartington/cdk-virtual-scroll-ionic

I highly suggest people start using the CDK scroller in their apps now, as we'll eventually remove virtual scroll from the framework specific bindings.

[omardoma]

Hey everyone! Just an update here.

We're going to be pushing folks to use Angular's CDK Scroller for virtual scrolling instead of our virtual scroller. A big reason why is that CDK Scroller is a framework maintained solution, therefore support/performance are guaranteed. At this time, we're not going to be pushing fixes for our virtual scroller.

For reference, I put together this repo which uses the Angular CDK scroller and Ionic, and everything was working as expected. Even browser resizing/items not collapsing.

https://github.com/mhartington/cdk-virtual-scroll-ionic

I highly suggest people start using the CDK scroller in their apps now, as we'll eventually remove virtual scroll from the framework specific bindings.

Hey @mhartington, thanks for the update and for providing the example, however I am afraid that using the CDK scroller causes problems when used with ion-infinite-scroll and ion-refresher, please check this thread to know more about the issues, is there a workaround or a specific way to use them together at the moment?

[masimplo]

Hey @mhartington I know you've done some fiddling in the past with CDK's VS but never got around to bringing this into Ionic. At that time I had also tried moving from Ionic to CDK as I imagined something like this might happen, but faced multiple issues on migrating.
To be totally honest, it is not an ideal situation to stop maintaining something and pushing users of Ionic to migrate right away to something that has no direct migration path, without instructions on how to migrate. For instance CDK has no support for headers/footers and no getPositionForItem function. Also it is another thing to build something on top of CDK and offer it as part of Ionic and a totally different one to ask every single user to integrate it with Ionic (i.e. on-infinite-scroll and ion-refresher mentioned above).
If you are indeed going to drop VS from Ionic, a deprecation message together with some instructions on how CDK can be a direct replacement for Ionic VS will be extremely helpful.

[ccroy]

Hey guys, I had the same problem and went down a few paths before coming up with a solution that, so far, works for me... hopefully this works for others as well.

FYI I've only tried this using Angular 8.1.2, interfacing with ionic serve as devapp on iPad Mini 4 (ionic serve --devapp).

My approach:

1. Subscribe to angular's router events. I did this inside ngInit() of the page that contains the virtual scroller.
2. If the incoming router event is an instance of NavigationEnd AND it matches the component selector for the page we are interested in, then dispatch a new 'resize' event on the window to induce the virtual scroll to resize.
3. Unsubscribe from the events in ngDestroy(), so that if we init the page more than once we don't have multiple router event subscriptions doing the same thing.

The code:

import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

const SELECTOR = 'scroll-fix-example';

@Component({
    selector: SELECTOR,
    templateUrl: ...
    styleUrls: ...
})
export class ScrollFixExamplePage implements OnInit {
    private routerSub: Subscription;
    constructor(
        public router: Router
    ) {}

    ngOnInit() {
        this.routerSub = this.router.events.subscribe(e => {
            if(e instanceof NavigationEnd && e.url.includes(SELECTOR)) {
                window.dispatchEvent(new Event('resize'));
            }
        });
    }

    ngOnDestroy() {
        this.routerSub.unsubscribe();
        console.info('Unsubscribed from router events');
    }
...

There's probably a better event to use to induce the resizing sooner than the NavigationEnd event, which may provide a better UX. Let me know your thoughts on this.

Edit:
I just noticed @MarkChrisLevy's workaround from Nov. 13, which looks like effectively the same approach that yields the same outcome, with the same downside being that the scroll position is likely different from before leaving the view.

[amin79]

@omardoma Hi. I exactly have the same problem in a same scenario. I navigate to chat page, open keyboard and navigate back and cards are overlapped. I tried andular CDK and had same problem. It didn't overlap, but didn't show the cards correctly and juts renders 2 or 3 of them. Did you find any solution for that? It's about a week I'm looking for a solution.

[eddyuan]

a lazy workaround would be
ionViewWillEnter() { window.dispatchEvent(new Event('resize')); }

[veerasep6]

i am using window.dispatchEvent(new Event ('resize')); .. virtual item was rerendered.. but list item was coming for duplicate items and my scroll position was change.. plz solve this issue..