NG-IF on Microsoft Edge/IE11 very slow

[calebeaires]

On load some parts of the angularjs app, using ng-if (instead of ng-show), the page rendering get very-very slow on Microsoft Edge and IE11. But if I change NG-IF to NG-SLOW, it is fast enough.

[Narretz]

How many ng-if's are we talking about? And do these ng-if's contain directives that load templates? If so, are these templates fetched from the server?

[calebeaires]

two ng-if's, no server side load, no directive. Inside each ng-if has a list of object loading its ng-repeat on a "ul" html list. But a very small list of items (just 3 to 5 items).

When I use ng-show, everything goes faster, but still more slowly then Chrome. I am using Material Angular.

Using:
AngularJS v1.4.4
Material Angular v0.10.1

[calebeaires]

[Narretz]

Can you reproduce the error without angular material?

[calebeaires]

I did it. It is very fast now. As fast as Chrome...! Is there some workaround so I can still use material angular?

[patrickkettner]

@Narretz can you post a demo showing the issue in edge?

[Narretz]

That's a good idea. @calebeaires can you post a demo of your code with the problem?

[calebeaires]

        <md-content style="width:320px; border-right:1px solid #ddd">
            <md-toolbar class="toolbar-gray">
                <div class="md-toolbar-tools">
              <!-- Back button -->
            <md-button ng-click="mostrar('livros', 'boxBookDois')" ng-show="!boxBookDois['capitulos']" class="md-icon-button">
                <md-icon aria-label="Menu" md-svg-icon="icons/view-list.svg"></md-icon>
            </md-button>
               </div>
            </md-toolbar>
            <md-content style="width:318px">
                <ul class="list-livros"  ng-if="!boxBookDois['capitulos']">
                    <li ng-repeat="l in livros" ng-click="carregarCapitulos(l.liv)">
                        <div class="abreviacao total">
                            {{ ::l.abr }}
                        </div>
                        <div class="nome">
                            {{ ::l.nome }}
                        </div>
                    </li>
                </ul>
                <div class="col-xs-3 bloquinhos" ng-repeat="(key, cap) in capitulos" ng-if="boxBookDois['capitulos']">
                    <span md-no-ink ng-click="carregarTexto(key)">{{::key}}</span>
                </div>
            </md-content>
        </md-content>

This is the code. If I use ng-if, code goes very very slow.