Mat-Select with long options text blinks in IE

[RandomNonameDude]

Bug, feature request, or proposal:

When there are options with long text in the options list in mat-select, the options are not shown whole when the list is open - which is, of course, correct. However, in Internet Explorer, the options somehow blinks to their full length and back to the truncated version when one opens or closes the list or when one selects an option.

What is the expected behavior?

The options list should not blink anyhow in Internet Explorer.

What is the current behavior?

When there is long text in select's options list, the list blinks when it is opened, closed, or when an option is selected.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-qdcxkp?file=app/select-overview-example.ts

Open in Internet Explorer and:

• Click the mat-select (first blink) and then click away (second blink).
• Click the mat-select (first blink) and then select an option (second blink).

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

Win7, IE.

[macjohnny]

this somehow seems to be related to #11609

[macjohnny]

This issue would be partly fixed with #11801, however there still is a small jump due to an issue with animating calc() in IE11: angular/angular#24545

see #11801 (comment) for a detailed analysis of the problem

[macjohnny]

@crisbeto please let me know whether you would accept a fix that removes the animation from 100% to 100% + 32px, so I could file another PR for this.

[Bamyan]

browser Edge 17.17134.0 on platform Windows 10 is also affected

[MaiLeeTR]

This is still an issue with shorter options as well. I saw that this issue was closed and fixes were merged, but I don't think it's fixed.

If you go to the mat-select examples in IE and look at the basic select example, the options are not long and the width of the panel still flickers when opening.

Should I submit a new issue for this or will this be solved with this current issue?

[jkossis]

Firefox 77.0.1 on Mac 10.14.6 seems to be an issue as well.

For some reason, I can't reproduce the issue on stackblitz, but it happens on an app that is bare bones, with only ng add @angular/material executed to it.

[jelbourn]

Closing this issue because Angular is dropping support for IE11 in the upcoming version 13. We don't plan to fix any further IE11 bugs going forward.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}