How to improve the sidenav animation performance angular material - angularjs

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.