diff --git a/src/lib/sidenav/sidenav-transitions.scss b/src/lib/sidenav/sidenav-transitions.scss
index ad445bff3b38..eff57506ba90 100644
--- a/src/lib/sidenav/sidenav-transitions.scss
+++ b/src/lib/sidenav/sidenav-transitions.scss
@@ -6,7 +6,11 @@ md-sidenav {
 }
 
 .md-sidenav-content {
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: {
+    duration: $swift-ease-out-duration;
+    timing-function: $swift-ease-out-timing-function;
+    property: transform, margin-left, margin-right;
+  }
 }
 
 .md-sidenav-backdrop.md-sidenav-shown {
diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md
index 9abebe591b25..069c5b46b32a 100644
--- a/src/lib/sidenav/sidenav.md
+++ b/src/lib/sidenav/sidenav.md
@@ -27,6 +27,8 @@ The sidenav can render in one of three different ways based on the `mode` proper
 | push | Sidenav _pushes_ the primary content out of its way, also covering it with a backdrop     |
 | side | Sidenav appears _side-by-side_ with the primary content                                   |
 
+Using the `side` mode on mobile devices can affect the performance and is also not recommended by the
+[Material Design specification](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior).
 
 ### Positioning the sidenav
 The `align` property determines whether the sidenav appears at the `"start"` or `"end"` of the