Angular 7 Material Expansion Panel flicker

This guy posted a temporary work around with css, that seems to work: https://github.com/angular/components/issues/11765#issuecomment-447991348

::ng-deep .ng-animating div mat-accordion mat-expansion-panel mat-expansion-panel-header {
    height: 48px;
  }
::ng-deep .ng-animating div mat-accordion mat-expansion-panel div.mat-expansion-panel-content {
    height: 0px;
    visibility: hidden;
}

I left away the ::ng-deep and added it to my global styles.


This is a bug. and there's an open issue for it.

It is caused when the expansion panel is contained and animated.

Click to see reproduce demo

The best workaround so far posted on this thread:

Click to see the workaround