Viewcache does not apply when grid is enabled

[ghenry22]

With gridEnabled set to false AND viewCache set to enabled or any number.

Items are displayed in a list, everything works nice. Good first render, good scroll performance all looks good.
Click on any item to go to the detail view for the item, works great
Click the back button in the browser or navigate back programmatically (angular router) and we see:

• the list displayed as it was, no re-draw or re-rendering
• the list at the same position it was when we clicked into the detail view

With gridEnabled set to true AND viewCache set to enabled or any number.

Items are displayed in a grid, everything works nice. Good first render, good scroll performance, recalcs items per row on resize.
Click any item to go to the detail view for the item, works great
Click the back button in the browser or navigate back programmatically (angular router) and here we see the problem:

• the list is not displayed, the viewport is blank initially
• the list renders again and the items all come into view, this looks bad as everything jumps around a bit
• the list position is incorrect (always scrolled further down the list)

So it seems that for some reason when in grid view the the viewCache either gets purged or the view is not cached when navigating away and back. This happens ONLY in grid view. It can be recreated with a simple list of items with an image in each item (I happen to be using ionic framework with angular).

I can only suspect that maybe the items per row gets recalculated or something which triggers a change and purges the view cache and causes a redraw? The items per row seems to be the big difference between grid and row which is what makes me think about this.

@lVlyke would be amazing if you could have a look, I'm more than happy to test a debug version or something if you setup a branch, just let me know. Aside from this one thing the library is working great and I really want to use it in the latest version of my app specifically for the list and grid switching.

[ghenry22]

If any part of the first ROW is showing in the viewport when you navigate away and back, then all is ok.

As soon as the first ROW is scrolled out of the viewport then the behaviour is seen. The entire list will re-render and it will jump to a scrollposition further down the list.

Also noted that on the list view scrollposition is 0,2922. click to go to detail view, scrollPosition goes to 0,0. Click to go back to list, scrollPosition is 0,10842. Not sure where it is getting the new value from or why but that would seem to be why it's always scrolling down the list randomly.

The min and max index values also change and shift upwards.

When on the detail view page (away from the list) I note that itemsPerRow goes to 0 and renderedItems goes to 1 (the first item in the list. List view does the same but in list view the itemsPerRow stays at 1. Perhaps when grid is enabled the itemsPerRow value should be maintained and at least that many items kept in the renderedItems array. This would align the behaviour with the list view. It might be what is causing a change to be detected as the items per row changes in grid view when navigating back and forth.

I think this may be all related to the calculation for itemsPerRow. When in list view the logic for this shortcircuits to always be 1. when in grid view it is calculated based on the clientWidth property of the Scroll Container. If the Scroll Container is hidden then clientWidth will return as 0 resulting in 0 itemsPerRow when in grid mode. Then when you come back it gets calculated again causing a change.

angular/material#578
This is an old issue but describes similar symptoms.