Expansion panel ordering issue with Virtual Scroll

[trevorsmiley]

Bug, feature request, or proposal:

cdkVirtualScroll does not work properly with matAccordion and matExpansionPanel.

On first display the order of items in the cdkVirtualFor is incorrect until you scroll down a bit

What is the expected behavior?

Item order is maintained

What is the current behavior?

For elements 0-100000, items 13->4 are shown first until you scroll down and back up then the order is slightly fixed to 0->x (depending on how far you scrolled). If you scroll far enough and then back up then the order is fully corrected to 0->100000

What are the steps to reproduce?

Stackblitz example

What is the use-case or motivation for changing an existing behavior?

Able to use expansion panels inside virtual scroll

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.0
Material 7.0
MacOS 10.14
TypeScript 3.x
Browser Chrome 70.0

Is there anything else we should know?

No

[josephperrott]

As a workaround you can wrap the <mat-expansion-panel>s in <ng-container>s.

<ng-container  *cdkVirtualFor="let item of items">
  <mat-expansion-panel>
    ...
  </mat-expansion-panel>
</ng-container> 

[trevorsmiley]

<ng-container  *cdkVirtualFor="let item of items">
  <mat-expansion-panel>
    ...
  </mat-expansion-panel>
</ng-container> 

works as a workaround

[klew582]

I'm experiencing this issue too, but wrapping in the ng-container didn't work for me...

[klew582]

I was on version 7.3.4 and reverting back to v 7.0.0 and wrapping in the ng-container fixed the problem, but this isn't ideal

[fsc93]

Try wrapping the Expansion Panels in a <div> instead of <ng-container> , not the best workaround but it seems to work on version 7.3.4
Hope this still might help someone

[KimAlexander]

Nothing helps. Any suggestions ?