Performance Issues with <md-tabs> and Internet Explorer

Hi!

When I have md-tabs with md-dynamic-height everything works smooth in chrome and almost smooth in firefox.

When i try it on Internet Explorer, the performance gets really bad. It gets even worse, when I add more complex content to the tabs like inputfields, images, switches etc.

See my fiddle here: https://jsfiddle.net/72fxcg1m/1/
I also asked about the issue on stackoverflow with possible solutions:
http://stackoverflow.com/questions/32872905/angular-material-tabs-performance-with-ie

are there any ideas about how to solve this problem?

[TimKlein87]

I just experienced the same problem. After some searching I only found one solution that turned off the animation using CSS, but tab switching was still incredibly slow in IE (11). So after some thinking I came up with the following workaround. It looks very good and works very fast.

        <section class="md-whiteframe-z2">
            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h3>Window</h3>
                </div>
            </md-toolbar>
            <div class="">
                <div ng-cloak>
                    <md-content>
                        <md-tabs md-dynamic-height>
                            <md-tab label="Tab 1" ng-click="tab = 'tab1'">
                                <md-content></md-content>
                            </md-tab>
                            <md-tab label="Tab 2" ng-click="tab = 'tab2'">
                                <md-content></md-content>
                            </md-tab>
                            <md-tab label="Tab 3" ng-click="tab = 'tab3'">
                                <md-content></md-content>
                            </md-tab>
                        </md-tabs>
                        <ng-include ng-if="tab == 'tab1'" src="'..'"></ng-include>
                        <ng-include ng-if="tab == 'tab2'" src="'..'"></ng-include>
                        <ng-include ng-if="tab == 'tab3'" src="'..'"></ng-include>
                    </md-content>
                </div>
            </div>
        </section>

[ThomasBurleson]

Please provide a CodePen demo.

To expedite resolution, please always test with the latest versions:

• Angular Material HEAD
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.js
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.css
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.js
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.css
• AngularJS Latest Release versions:
  • Angular 1.3.19 (or greater)
  • Angular 1.4.6 (or greater).

Can you confirm the issue still exists with the above versions ?

[TimKlein87]

CodePen: http://codepen.io/anon/pen/OyjBLz
Works great in Chrome, very slow in Internet Explorer (11). If it has to do with the animation, maybe something like <md-tabs md-dynamic-height md-disable-animation> can be added.

[baolocdo]

I am having the same problem with my app. Everything looks great on Chrome and Firefox but on IE and Edge, everything inside md-tabs-content-wrapper under the md-tabs with dynamic height does not show up. I took out the class .md-dynamic-height and the content showed up again but the content was cut off weirdly.