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

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.

Screen Recording 2019-09-04 at 1 08 00 PM

Other information:

https://github.com/ionic-team/ionic/issues/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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 24 (7 by maintainers)

Most upvoted comments

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.

masimplo on Dec 17, 2019

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

@brandyscarney @adamdbradley

TdoubleG on Dec 4, 2019

@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.

MarkChrisLevy on Nov 13, 2019

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.

mhartington on Dec 16, 2019

@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.

omardoma on Oct 24, 2019