VirtualScroll data doesn't render (very basic setup with no functionality)

[BAWES]

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Not rendering a simple list. (Just post titles without any conditionals or complex logic).

Expected behavior: Have the virtuallist display the text without disappearing.

Steps to reproduce: I've setup a brand new Ionic2 app and pasted in the example from the docs. I have a repo with the code: https://github.com/BAWES/ionic-virtual-scroll

Related code:

<ion-list [virtualScroll]="items" [approxItemHeight]="'40px'">

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

  </ion-list>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.11 
OS: OS X El Capitan
Node Version: v7.5.0
Xcode version: Xcode 6.3 Build version 6D570

[Luukschoen]

Experiencing this exact issue as well. I'm encountering it since version Ionic3.beta, so I guess it got broken somewhere along the way. If I bind the virtualscroll to an empty array before filling it up, it produces this error:

TypeError: Cannot read property 'top' of undefined at updateDimensions (http://localhost:8100/build/main.js:146000:18) at http://localhost:8100/build/main.js:85260:111

[digaus]

Can confirm... althought it works after refreshing the items only. So it just does not work on initial page load for me. Using v2.3

[LukeStonehm]

Sigh ... Does anyone have a workaround for this issue? Upgraded my project to get at the infinite-scroll's new WaitFor method, now my virtual-scroll is broken..

[pavimus]

Got this error in ionic 3.0.0. virtual-scroll and ion-img are completely unusable now :-\

[stockrel]

Had the same problem but migration to 3.0.1 (since yesterday) solved it ! Thanks for the update

[Mohsen7s]

I have the same problem and upgrading to 3.0.1 didn't help. In browser it's rendered however with apk install in real device there is nothing rendered! Right after I enter the page with virtual-scroll my device get freezed.

[royipressburger]

Also having the same issue, Im pulling data from serve on ionViewWillLoad and when I enter the page the screen ticks and I must scroll for the data to render

[timmyrosen]

Experiencing a similar issue. My list displays somtimes, and sometimes after scroll, but images with ion-img doesn't lazy load. Only the first set of images are loaded and displayed. Exactly like this: #9660

Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v7.7.2
Xcode version: Xcode 8.3.1 Build version 8E1000a```

[rehannawab]

Same issue here as well. When navigating to a page with a virtual scroll list, it renders sometimes and doesn't ( seemingly randomly).

[kemargrant]

I am having the same issues. I found a way to get the list to actually show up. If I load the list array before entering the view the list will render but the top two spaces of the list does not render properly, but I have other rendering issues with ionic2 so I think that may be separate.

[Mohsen7s]

@kemargrant Thanks that did it! seems like virtual scroll has problem with async data binding..

[xiejiabao]

I got a similar problem in VirtualScroll. The data have been loaded and the list item is in dom tree but virtual scroll dose not render and the list does not show as well in my case.

In my case, I have a list using virtual scroll and clicking the item will navigate to detail page. The list is loaded properly first. Then I navigate to detail page and click any input field (let keyboard show) and then click back button. When back to list page, the list does not show anything but the items are there according to the dom.

I am using Ionic 3.2.

Cordova CLI: 6.5.0 Ionic Framework Version: 3.2.0 Ionic CLI Version: 2.2.3 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.7 ios-deploy version: 1.9.1 ios-sim version: 5.0.13 OS: macOS Sierra Node Version: v6.9.5 Xcode version: Xcode 8.3.1 Build version 8E1000a

[Xlander11]

For me it gets the data in the dom but there's nothing inside the virtualScroll element as you can see below:

Cordova CLI: 6.5.0 Ionic Framework Version: 3.2.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.3.7 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 7 Node Version: v6.9.1 Xcode version: Not installed

[stramanu]

Same problem for me, there's any update?

[fastrde]

had the same problem. When I initialize the array where the async call stores the items afterwards it starts working again.

private items = []; //important!
// private items = null; // didn't work

constructor(public navCtrl: NavController, public navParams: NavParams, private provider: MyAsyncProvider) {
  this.provider.getData().subscribe((data) => {
    this.items = data;
  });  
}

[andrewvmail]

Also having the same issue with chat app. I load up virtualscroll with an array on viewenter everything works and subsequent load doesnt work until i scroll up and down to initiate a render.

[haroonjoblo]

I am having the same issue, sounds like a major bug that needs to be addressed. I had few issues with ionic prior to 2.3.0 where inifnitescroll and virtual scroll weren't working properly together, 2.3.0 and above is supposed to solve this issue, but the new rendering issue just came in out of no where. I hope there is a fix or work around.

[zjhiphop]

Same issue in ionic 3.5.3

  Your system information:

    Cordova CLI: 7.0.1
    Ionic Framework Version: 3.5.3
    Ionic CLI Version: 3.0.0-beta.4
    ios-deploy version: 1.7.0
    ios-sim version: 4.1.1
    OS: macOS Sierra
    Node Version: v8.4.0
    Xcode version: Xcode 9.0 Build version 9A235

[jgfet]

The problem seems to be CSS related. If I uncheck

I get

But with them both checked, no content

[fdambrosio]

I have the same problem, but only using iOS 9. On iOS10 & iOS11 & Android it's rendered

[demym]

virtual scroll randomly does not show some items, especially when scrolling top or bottom, on 3.10.3:

ionic info

cli packages: (/Users/pietroturati/.nvm/versions/node/v6.9.2/lib/node_modules)

@ionic/cli-utils  : 1.10.2
ionic (Ionic CLI) : 3.10.3

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 0.0.48
Cordova Platforms  : browser 4.1.0
Ionic Framework    : ionic-angular 2.0.0-rc.4

System:

Android SDK Tools : 26.0.2
ios-deploy        : 1.9.2
ios-sim           : 6.1.2
Node              : v6.9.2
npm               : 3.10.9
OS                : OS X El Capitan
Xcode             : Xcode 8.2.1 Build version 8C1002

Virtualscroll is a powerful and vital feature, when it will be fixed ? Tried with old versions, never worked fine.

[OlivierHokke]

I am also experiencing issues. Nothing gets shown, but if I set the list with a timeout of 100 ms, the content will get shown. Whenever I at some point remove something from that list, it works. But, then after I add something, the last item of that list is not displayed, but height for that item is taken into account...

I'm on ionic 3.19.1

[fdambrosio]

there's problems on ios 11 too

[ghost]

Never got it to work :(

[malwatte]

I'm having this issue too. I'm on Ionic 3.9.2. Nothing in the list is visible sometimes. Happens rarely. I would say it happens 10% of the time. Only way to get the list back is to close the page and open it again. I really need to get this fixed. In my case, problem is there is no exact way to reproduce the issue.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/198