Ionic-framework: Virtual Scroll Not Filling Entire Space

[danbucholtz]

In V2, when I use virtual scroll in the ionic-image-gallery-app, it does not fill all of the provided space with "cells".

See the screenshot for a visual reference.

Basically, the virtual-scroll container has access to the entire screen. It is not utilizing it by default. Once I scroll, it does begin using it.

Before Scrolling

After Scrolling a few px

Thanks,
Dan

[fmsouza]

I'm also having this issue in a view with 2 virtual scrolls: recent searches and available lines. When I first load it, it gives me a blank space in the beginning of the list. If I click in the search button in the navbar, the recents pane is hidden and the 'available lines' VS becomes ok. When I toggle search back and the first scroll appears again, the 'available lines' VS stays ok.

[mpaland]

Is related to #6766

[fmsouza]

@mpaland actually my issue is not the same as the one you mentioned. I've inspected the element in the browser, and it seems to be applying a CSS rule transform: transform3d(0, ..., 0); in all list elements, and they are always around 200px more distant from where they should be.

I also noticed that the list is built using this transform3d rule and with position rule different from relative instead of presenting it as a common list. So each element is moved down by the css rule... Very weird.

[ghenry22]

I notice very similar behavior on virtualscroll lists. They will fill the viewport initially, scroll down quickly and when the scroll stops only part of the view will be occupied until your scroll 1 or 2 px further then the full space is used.

[oktav777]

@danbucholtz how u managed to make the virtualScroll with multiple elements on a line?

[ghenry22]

The repeating virtual item is a col inside a row with the wrap parameter set which is part of a grid. I believe that's right anyway

[oktav777]

@ghenry22 I cloned the repo, and there is nothing special done to display more elements in a line, very strange, will need to review how its working.

@danbucholtz you can try to increase the bufferRatio of the virtualScroll to 3-4, this will create some more DOM elements and will fill the viewport from the beginning.

[danbucholtz]

@InfinityOne, Virtual Scroll will try to fill the entire space available. Our items are small (images), so it just automatically does it.

Thanks,
Dan

[fdelayen]

It looks like this issue is making the virtual scroll to be really buggy on ios. Sometimes there are blanks at the top, or middle or even sometimes everything is blank...
Relying on Virtual scroll for our app makes it unusable on ios at the moment.
Do you have plans to update this issue soon ?
Thanks !

[ionitron-bot[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.