Angular Material - md-virtual-repeat in list - scroll/loading/display issue

Question

When scrolling down a list under md-virtual-repeat there is an inconsistency between scroll and display speed. Items are not being displayed fast enough to keep up with the scroll speed. It also scrolls 'past the list' so that white space is displayed at the bottom (whereas it should have stopped scrolling).

See codepen: http://codepen.io/sweatherly/pen/PzKRLz

md-list-item, md-list-item ._md-list-item-inner {
  min-height: 32px;
}

The problem is aggravated by changing min-height on "md-list-item, md-list-item ._md-list-item-inner" away from it's default value. On codepen, the problem is non-existent when the min-height is not changed (running on my local machine with Chrome it is worse but not terrible. However, it is more problematic at certain screen sizes).

I played with the CSS and googled for a few hours but found nothing that solved the problem. Any ideas?

Answer 1

I noticed a similar problem a while ago and came across the md-item-size attribute of md-virtual-repeat .

Its description in the docs is as follows:

The height or width of the repeated elements (which must be identical for each element). Optional. Will attempt to read the size from the dom if missing, but still assumes that all repeated nodes have same height or width.

I've added this to your example

<md-list-item md-virtual-repeat="test in testings" class="repeated-item" flex="" md-item-size="48">

where 48 is the height of the md-list-item , and removed

md-list-item, md-list-item ._md-list-item-inner {
  min-height: 32px;
}

CodePen

The scrolling appears to be smooth and without a white space at the bottom.

I also changed this CSS so that the scroll within the md-virtual-repeat-container works correctly

.md-virtual-repeat-container.md-orient-vertical {
    height: calc(100% - 100px);
}