VirtualScroll elements disappear to early from the view

[zk118]

Ionic version:
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[X] 3.x

I'm submitting a ...
[X] bug report

Current behavior:
Hi, since I upgraded from ionic 2.2.1 to the latest 3.9.2 i have an issue with the VirtualScroll.

Here is the start page (there is a toolbar in header):

When i start scroll to the bottom (everything is fine):

When i scroll a bit more, the first element of the list disappear to early and we can see a huge blank space which is awful. It should disappear when the first element is almost visible on the top. :

When I delete the toolbar in the header it fixes the issue so I think the Virtual scroll doesn't understand that there is this gap between the top of screen and the start of the virtual scroll. How can I tell him that this gap exists?

It happens on both serve and devices.
It happens not only on the first element of list but on all the elements.

Expected behavior:
The first visible element should disappear when it is almost visible on the top.

Related code:

 <ion-list [virtualScroll]="feed.posts" approxItemHeight="225px"  no-lines>
    <div class="feed-item" *virtualItem="let post" style="width: 100%">
       <ion-card> ... </ion-card>
    </div>
 </ion-list>

Ionic info:

Cordova CLI: 8.0.0 
Ionic Framework Version: 3.9.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 3.1.7
ios-deploy version: 1.9.2 
ios-sim version: 6.1.2 
OS: macOS Sierra
Node Version: v9.3.0
Xcode version: Xcode 9.2 Build version 9C40b

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[kensodemann]

Hello! As it seems it has been a while since there was any activity on this issue I am closing it for now. If you are still having the issue, please be sure to include a GitHub repo with a sample application.

Thanks for using Ionic!

[daveshirman]

Do not close this! It is still an issue as with ALL the other virtual scroll issues. Come on guys!

…

On 16 Jan 2018 11:46, "Ken Sodemann" ***@***.***> wrote: Hello! As it seems it has been a while since there was any activity on this issue I am closing it for now. If you are still having the issue, please be sure to include a GitHub repo with a sample application. Thanks for using Ionic! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#13772 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANnlXuaQUkmSx1DjsSp5714yeEWyKlH1ks5tLIwVgaJpZM4RUZU8> .

[newHagen]

I just noticed the exact same issue.

As soon as there is any content above the virtualScroll area, the virtualItems start to disappear while they are still visible. The offset seems to match the height of the content before the virtualScroll starts, which might result in scrolling through pages without any content.

[zk118]

@BitEater

Yeah, the only workaround I found was to put the toolbar in the header and not in the content (so it is visible even on scroll).

[newHagen]

@evenmind Yes, that worked for me too. But this does not solve the issue if you have additional content - like featured posts, etc. - above the list of scrolling items. And this bug is limits you in the layout of your UI-features.

[zk118]

Yes it's really annoying !

[daveshirman]

My STRONG advice is to find a way around using virtual scroll. Make your list filtered in some way that means you can render all the items normally. Virtual Scroll is completely and utterly broken and not worth wasting time on until someone from the Ionic team acknowledges the multitude of issues surrounding it and fixes them. But then they seem far more focused on PWA matters to bother with trivial things like making a stable and robust framework... Maybe if this gets enough upvotes someone will actually do something? Who knows.

…

On 6 Feb 2018 2:44 pm, "evenmind" ***@***.***> wrote: Yes it's really annoying ! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#13772 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANnlXqCX8Bnzf-ttNnnhdFuYcVgYWxF_ks5tSGVlgaJpZM4RUZU8> .

[zk118]

@daveshirman The problem is I have a huge liste of 1000 elements, each one have an image so if I don't use the virtual scroll and load elements by 10 for exemple with an infinite scroll, if scrolled to the bottom the DOM can't support rendering 1000 elements so I have no choices. Except if you have an idea for this?

[daveshirman]

maybe the suggestion here: #11542 by @RafaelKr

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.