Ionic virtualscroll failing to render properly on scroll (video)


#1

Hi,

In the previous ionic version I had a some problems with the virtual scroll (items being rendered overlapping and taking forever to render properly).

Since the last update it is getting even worse, where scrolling would make the virtualscroll not rendering properly.

Here is a screen cap:
https://youtu.be/tfYSLy6p-y0

Here is a snippet of my code. All property are properly filled and the height and with of the mzk-thumb is locked in CSS.

                    <ion-content (ionScroll)="onScroll($event);"
                                 [hidden]="!(!timedout && !loading && medias.length!==0)"
                    >

                        <ion-list [virtualScroll]="medias"
                                  [approxItemHeight]="iconHeight+ 'px'"
                                  [approxItemWidth]="iconWidth + 'px'">
                            <div *virtualItem="let item">
                                <mzk-thumb
                                    [media]="item">
                                </mzk-thumb>
                            </div>
                        </ion-list>
                    </ion-content>

the “medias” object isn’t modified after being set either…


#2

For info:

cli packages: (/Users/millerf/Documents/www/Mozaik/mzk_app/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
Node       : v6.11.1
npm        : 5.5.1 
OS         : macOS High Sierra
Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy