How to improve the sidenav animation performance angular material

Question

I have made a sidenav using angular-material's md-sidenav and below is the screenshot of it. When i try click on the button for sidenav the animations pretty lagging. I have used on an image on the top bar and the rest just text with font-awesome icons. What could i be possibly doing bad that it is slow. The animations are even worse when i view it on mobile.

Screenshot of sidenav :

Here is the code of sidenav :

<md-sidenav class="boxme-sidenav" layout="column" hide-gt-sm class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
    <div layout="coloumn" style="z-index:1000;box-shadow:2px 0px 10px grey;">
        <div flex class="sidenav-logo">
            <img ng-src="{{mainLogo}}" alt="">
        </div>
    </div>
    <md-list style="background-color:#00B0FF;color:white;z-index:10;">
        <md-list-item class="md-2-line sidenav-list" layout-padding>
            <md-button href="" layout-align="space-around center">
            <i class="fa fa-size fa-briefcase"></i>
              <span class="md-body-2">Dashboard</span>
            </md-button>
        </md-list-item>
        <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center">
            <md-button href="">
              <i class="fa fa-size fa-user"></i>
              <span>My Stuff</span>
            </md-button>
        </md-list-item>
        <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center">
            <md-button href="">
              <i class="fa fa-size fa-file-o"></i>
              <span>Order History</span>
            </md-button>
        </md-list-item>
        <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center">
            <md-button href="">
              <i class="fa fa-size fa-credit-card"></i>
              <span>Billing</span>
            </md-button>
        </md-list-item>
        <md-divider></md-divider>
        <md-subheader style="background-color:#00B0FF;color:white;">Manage the items</md-subheader><!--You can use md-no-sticky class-->
        <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center">
          <md-button href=""><i class="fa fa-size fa-user"></i> Pickup my stuff</md-button>
        </md-list-item>
        <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center">
          <md-button href=""><i class="fa fa-size fa-user"></i> Deliver my stuff</md-button>
        </md-list-item>
    </md-list>
</md-sidenav>

Note :

After a while the performance and animations of sidenav get real lagging on the web.

Answer 1

It may not be right solution for your case, but disabling backdrop and adding 1 tweak made transition performance acceptable for me (even on phone)

.md-sidenav-backdrop {
    opacity: 0 !important;
}

md-sidenav.md-closed-add,
md-sidenav.md-closed-remove {
    -webkit-transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important;
    transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important;
}

Answer 2

I decided to just remove the animation as follows:

I looked through the AngularMaterial CSS file and removed all references to animations. KA-BOOM!

/**
* fix md-sidenav lag by removing animation
**/

.md-sidenav-backdrop {
    opacity: 0 !important;
}

md-sidenav.md-closed-add,
md-sidenav.md-closed-remove,
md-sidenav.md-closed-add.md-closed-add-active, 
md-sidenav.md-closed-remove.md-closed-remove-active,
md-sidenav.md-locked-open-remove-active,
md-sidenav.md-closed.md-locked-open-add-active

{
    -webkit-transition: none !important;
    transition: none !important;
}

---- edit ----

Also update to the latest version of AngularMaterial there seems to be an overall improvement in v1.0.0-rc4 compared to prior releases.