Components: Mat-Panel: Low-performance while scrolling of panel content in Internet Explorer 11 (IE11)

[Stas-tolpekin]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Smooth scrolling of panel content in a case when content overflows panel in any supported browser.

What is the current behavior?

IE browser has very slow scrolling (has bad performance and lags) when the panel content has not quite simple structure and content overflows the panel.
In other browsers, there are no any visible problems.

What are the steps to reproduce?

1. Open example on Plunker in Internet Explorer 11: http://plnkr.co/edit/4uMvn3QbaU7pBRY5jTeM
2. Click "Open panel"
3. Try to scroll panel content

You can see scrolling has awful lags

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

This problem doesn't allow to use the panel component for showing tables with checkboxes or radio-buttons (for example). Or for any other not simple forms.
IE11 is used for some enterprise applications yet.

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

Angular 5.0.3
Material 5.0.0-rc1
OS Windows 10
TypeScript 2.4.2
Internet Explorer 11

[crisbeto]

This seems to be more of an issue of rendering 100 sliders, e.g. replacing them with 100 buttons works better.

[Stas-tolpekin]

@crisbeto I tried to use this content without a panel. The performance was good.
And I tried to use other input components in the panel. and I got the same bad result (lags)

You can see it in this example: http://plnkr.co/edit/81RsdBbROdXaLmQrYumr

[Stas-tolpekin]

@crisbeto By the way, scrolling has the same lags if I use buttons.
http://plnkr.co/edit/Rvf2JNDZa0X3LyudBQ0R

[samirbittar]

I have the same problem. A few <input matInputs> inside a popup. Typing text is slow in IE 11 only, and scrolling is even worse

[macjohnny]

still present in 7.3.3.
Profiling shows that scrolling inside the mat dialog causes long blocking repaints of the entire cdk-overlay-container:

workaround: dividing the content into multiple mat-tab elements avoids the need to scroll inside the mat dialog and thus prevents the performance issue.

[macjohnny]

this issue could be related: https://github.com/angular/material2/issues/11758

[patakattack]

With MatDialog, I was experiencing the slow lag issue as well. A fix that worked for me was to apply this css:

.mat-dialog-container {
     border-radius: 0px !important;
}

It might change the appearance but I can deal without rounded corners for a performance increase.

This might be related but I suspect border-radius and overflow don't play nicely together in IE 11 on a single element:

https://stackoverflow.com/questions/39490557/how-does-overflow-hidden-border-radius-on-a-container-cause-massive-slowdown

I struggled to find a solution but this seems to have fixed it for me :-)

[bromax89]

@patakattack Thank you so much for this fix. It completely fixed our performance issues in IE11. We unfortunately need to support it because it is our company default.

[NaigoApps]

@patakattack Solved thanks to you. IE 11 is really amazing :')