Material: Performance Issues with <md-tabs> and Internet Explorer

[ghost]

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

[ghost]

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.

[charlietfl]

Similar issue using md-tabs with md-dynamic-height inside md-dialog IE 11. My customer is using WIndows 8.1 and tabs are causing IE 11 to freeze and completely lock up OS to the point of hard re-boot. Have even had him export favorites and reset IE 11 to default factory settings as well as run with add-ons disabled.

Am using angular 1.4.8 and material 1.01

I can not reproduce unfortunately using VirtualBox and IE 11 in Windows 8.1.
Oddly the same config seems to work fine in IE10 as well as IE11 in Windows 7

[apat183]

+1 using complex md-tabs in IE11, even MS Edge brings the app to complete slow down.

[WDShannon]

+1. This is a big issue. Tabs are a pretty common component and for the performance in even the latest IE browsers to be so bad makes it hard to use the control.

[ckpearson]

:+1: I'm getting this in IE as well, Edge is fine for me. I'm not using dynamic height.

I've just got two tabs, and switching between them is really upsetting IE.

Big problem for me as majority of clients are likely to be using IE.

[BobKlaas]

I'm having the same issue. I'm using a md-dialog that has 7 md-tabs. Each tab has about 10-20 href tags in the contents. It is brutally slow on IE 11 and Edge. Chrome works perfect. This issue is delaying our release. I'll try and CodePen an example.

[crisbeto]

@BobKlaas, @ckpearson what version of Material are you using?

[sdebionne]

Things are improving from 1.0.7 (about 5 seconds of delay when switching tabs, IE freeze) to 1.1.0-rc2 (slideshow at one fps), using IE11 Edge.

[apat183]

I noticed back in Feb and was using 1.0.5

I haven't been able to try lately because I've just made my own solution similar to @TimKlein87 above and added animations myself. No performance issues at all. I noticed personally that it was really bad when using md-dynamic-height

I tried playing around with md-enable-disconnect but it didn't help much.

[crisbeto]

Well I tried looking into it a bit, it's not the animation that's causing the performance issues, but there's a lot of layout thrashing going on inside of loops. Here are a couple of cases where it happens:

https://github.com/angular/material/blob/release/1.1.0-rc2/src/components/tabs/js/tabsController.js#L497
https://github.com/angular/material/blob/release/1.1.0-rc2/src/components/tabs/js/tabsController.js#L571

I haven't looked into any ways of working around this, though. @ThomasBurleson should we invest more time into this?

[ThomasBurleson]

Pagination features have caused significant problems with Tabs. I wonder if we should supported a md-pagination-disabled attribute.

Material1 Tabs (tab-body-content areas) are not intended to have complex areas. If you experience perf issues with lots of tabs and non-trivial tab content, you should try this:

• use a single external content to represent the current select tab content area
• use Tabs selectedIndex to route or switch the content in the external content area

This is especially important if you are routing and the Tab construction is costly...

See the app Material Adaptive Shrine.

• previously each tab had a child featuredItem and a productGrid component... this caused huge perf issues.
• refactor and moved a single external productGrid outside the tabs (aka navBar)
• uses md-on-select or databinding to update the productGrid content.

[BobKlaas]

@crisbeto We resolved our IE issues by using Angular Material v1.0.5 with AngularJS v1.5.3. Before we were using AngularJS v1.0.6 and it seemed to give us performance issues.

[alzalabany]

still having bad performance on webview cordova app.
i made a slim directive to replace md-tabs posted a question on
http://stackoverflow.com/questions/36906722/replacing-angular-directive-with-static-html-reactivating-later
do you think such a slim approach can work ?

[mtorres0612]

Hoping this issue will be resolved completely.

I'm certainly a big, big fan of this technology. In fact, I'm currently overhauling our existing system using Angular Material. Worked 100% fine in Chrome and Firefox, except IE 11. Performance is terrible, you will regret opening the application on that browser. Tried accessing https://material.angularjs.org/latest/demo/dialog as of this writing, results so far:

Chrome (Version 50) - OK
Firefox (40) - OK
IE 11 - Kill me now :)

Thanks!

[chris-eaton]

I echo @mtorres0612 - The dialog page (and most I go to actually) has terrible performance in IE11.

I have a development spec machine (i7, 16Gb RAM) and after a system restart, opening IE11 and going to the dialog demo page I have terrible performance problems, both navigating around the site and when trying to open dialogs on the dialog demo page.

[crisbeto]

@chris-eaton, @mtorres0612 please use https://material.angularjs.org/HEAD/demo/dialog, when checking this. The "latest" site is 1.0.8 where we had some performance issues that should be resolved in 1.1 (which is HEAD). That being said, dialog is still slow to open (~150ms on IE vs ~5ms on Chrome), because of a few calls to getBoundingClientRect.

[mtorres0612]

@crisbeto - Thank you for the information!
In line with this, I have tested the HEAD version in IE11. All working fast just like Chrome!
Also confirmed that mdDialog is still slow to open. Anyway, that is something to note for.

Will incorporate the HEAD version into my application. Will get back to you (maybe on a different thread) should there be any more issues.

Thank you very much for this state-of-the-art framework! Really loving it!

Cheers

[Splaktar]

This is a very common use case for new projects starting with Angular Material. Perhaps we need to update the docs to warn people about using md-tabs in this way, especially if this issue is going to stay in the Backlog.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[zaxy78]

Is this permanently closed?
The original CodePen from @TimKlein87 is still VERY slow and my app has the same issue 😢

[apat183]

This is my workaround. I just put my own switch animation on class.

https://codepen.io/anon/pen/NapRWE

Performance is better then @TimKlein87 example using the same content. Both examples will be relatively slow though since it's got so many inputs. If your app is slow using mine or @TimKlein87 example then I would say it's more due to the content in the tabs rather then md-tabs.

[Splaktar]

The fix for this issue is to use navBar for cases where you need to include a significant amount of content in each tab.

md-tabs are designed for use with a small amount of content. Using md-tabs for a few tabs that contain a significant number of DOM elements, or for many tabs that have a moderate amount of DOM elements per tab will lead to performance issues. In that case the md-nav-bar should be used.