diff -u b/core/modules/outside_in/css/offcanvas.css b/core/modules/outside_in/css/offcanvas.css
--- b/core/modules/outside_in/css/offcanvas.css
+++ b/core/modules/outside_in/css/offcanvas.css
@@ -32,5 +32,10 @@
 }
 
-#page.offCanvasDisplay {
+#page.offCanvasDisplayInProgress {
+  position: fixed;
+  display: inline-block;
+}
+
+#page.offCanvasDisplayed {
   display: inline-block;
 }
diff -u b/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
--- b/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -65,7 +65,7 @@
         .animate({width: pageWidth}, {duration: animationDuration, queue: false, complete: function () {
           // Remove some leftovers on $page.
           page
-            .removeClass('offCanvasDisplay')
+            .removeClass('offCanvasDisplayed')
             .removeAttr('style');
 
           // Remove off canvas element, and set display state variable.
@@ -121,10 +121,20 @@
 
       // Animate $page and $offcanvasWrapper to simulate a slide in effect
       $page
-        .addClass('offCanvasDisplay')
         .animate({
           width: pageWidth * .8
-        }, {duration: animationDuration, queue: false});
+        }, {
+          duration: animationDuration,
+          queue: false,
+          start: function () {
+            $page.addClass('offCanvasDisplayInProgress');
+          },
+          complete: function () {
+            $page
+              .removeClass('offCanvasDisplayInProgress')
+              .addClass('offCanvasDisplayed');
+          }
+        });
       $offcanvasWrapper
         .animate({right: 0}, {
           duration: animationDuration,