md-select (mdSelect) broken and slow in IE11 and Firefox

[rhnatiuk]

In newer builds, e.g. in 0.9.0-rc1-master-aff50d5, and in 0.9.0-rc2, md-select behaves weirdly in IE11 (have not tried in IE10): there is rather long delay before the list opens after click. Depending on page complexity (at least so it seems), it can be anywhere from1 to 3 seconds. In Firefox the delay is also present, although not that long. All is working fine in Chrome. This happens also in the select demo page, so it is not something in my layout.

Older builds, including e.g. 0.8.3-master-cd1e688 work fine (I have a feeling that earlier 0.9.0-rc1-* builds also worked fine, although cannot confirm it now).

How it was in 0.8.3-master-cd1e688 (clicks are yellow, unfortunately, but visible nevertheless):

How it is in 0.9.0-rc2 (by the way - observe the value is also moving up and down; the selector is gone as well):

[rhnatiuk]

Played with this issue a bit more, and it seems that it is not that simple. The performance is quite OK if I try a simple page, or greatly simplified layout trying to mimic the real app.

But in the app it all goes broke. Unmentioned in my previous message is the fact that if the md-select is close to the bottom border of the page, the page will jump up to fit the list box.

There seems to be no simple repro for the issue, but even the Select's demo page exhibits many of these behaviors, i.e. both Firefox and IE11 are slower than Chrome, they behave differently, they do not get progress spinner in async demo, etc.

It is probably somehow boiling down to layout components and tree, i.e. md-content, section, div, md-list, etc. elements up the tree with layout="xxx", flex, etc. attributes, but there is no clear guide as of how to correctly achieve the desired result - sample pages are really very simple.

PS The same problem has always plagued Microsoft's WPF: million ways to make something visually appearing the same, but only one way to make it so that it works well.

[rschmukler]

This is fixed with the non-DOM breaking select that was released in 0.9.4.

[Londovir]

I'm not sure which element of this ticket you are saying is fixed with 0.9.4. I just created a barebones project utilizing v0.9.7-master-2496317 and AngularJS v1.3.15 that consists of nothing more than a single md-select with 200 generated items, and there is a noticeable lag on IE11. In Chrome and Firefox the list will appear somewhat immediately upon clicking the md-select, but in IE11 it takes from 1.78 to 1.91 seconds to appear. The IE times are actually slow enough that I can put Chrome/Firefox on the left half of the screen, IE11 on the right half, click the dropdown in IE11, rapidly move my mouse to the side and click the dropdown in Chrome/Firefox, and they'll both open about the same time.

FWIW, in a VM I've seen Edge/Spartan run slow as well, though a touch quicker with average times on my VM of 1.45 to 1.6 seconds or so. I believe the performance concerns are still open on this issue ticket.

CodePen test: http://codepen.io/londovir/pen/bdqVZw

[greenecreations]

I can verify that this occurring in my barebones project. I'm running the latest via bower.

[aretheregods]

I can also verify that this is still an issue on ver. 0.10.0.

[ThomasBurleson]

@greenecreations @aretheregods - please make sure you are using the latest from #master:

• Do you still have these issues?
• Which version of Angular are you using ?

[aretheregods]

I'm on version 1.4.4 of angularjs and version 0.10.1 of angular-material - the most current from master. I do still have this issue with md-select, exactly the same issue as stated in the op.

[Londovir]

Still seeing it in my CodePen which points to AngularJS 1.3.15 and master from angular-material. In IE11 (Windows 10 build), it takes over a second to open after initial click. Much of the time is spent in multiple "Style calculation" events in the timeline, as shown here:

What's odd is my timings for using Edge are actually a bit longer than IE11 (6ms longer for the first layout, and 130ms longer for the layout that comes as a result of the focus() in the animation frame callback), yet Edge feels like it visually responds quicker. Not sure how that is the case, unless the Performance timings are wrong.

In Chrome, as best as I can compare, the first layout clocks in at around 9.203ms for 406 elements for the style calculations, followed by 3.945ms for the layout, so around 13.1ms total, compared to IE11/Edge's 190ms.

[ThomasBurleson]

@rhnatiuk, @Londovir - I believe this has been fixed with the IE performance improvements from recent Layout changes. Would you mind retesting with the latest 0.11.0-rc1 (or newer) build(s)?

[aretheregods]

I can confirm that this issue is resolved on my machines for both internet explorer as well as for firefox (it had the same problem as internet explorer in my case).

[Londovir]

Confirmed in my new test case in IE11 and Edge. Great work - thanks!

[ThomasBurleson]

Excellent, thank you for the confirmation(s).

[Halynsky]

Hello!
I have same problem on version release v1.1.0-rc1 with Firefox Mozilla 44.0
It have deley before open the options.
Same is in official demos.
https://material.angularjs.org/latest/demo/select

so its realy some bug I think
Is there some way to fix it? Or will it be fixed in next versions? thx.

[kslo88]

This issue is still seen in firefox.

[Shoya90]

v 1.1.1 and the bug still exists.

[st3fun1]

I'm having this issue on IE11 and Edge14/15, the other browsers are working well

[commitBlob]

Having performance issue - IE11 - AngularJS v1.5.5