diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 69eb7c2..f14f337 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -56,18 +56,43 @@
   position: relative;
   z-index: 1250;
 }
+.toolbar .toolbar-tray {
+  position: absolute;
+  width: 100%;
+  left: 0;
+}
 /* Position the admin toolbar absolutely when the configured standard breakpoint
  * is active. The toolbar container, that contains the bar and the trays, is
  * position absolutely so that it scrolls with the page. Otherwise, on smaller
  * screens, the components of the admin toolbar are positioned statically. */
-body.toolbar-fixed .toolbar-oriented,
-.toolbar-oriented .toolbar-bar,
-.toolbar-oriented .toolbar-tray {
+.toolbar-oriented .toolbar-bar {
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
+.toolbar-oriented .toolbar-tray {
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+/* Flickering fix */
+@media (min-width:61em) {
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+    position: relative;
+    display: block;
+    z-index: -999;
+    visibility: hidden;
+    width: 1px;
+  }
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+    width: 999em;
+  }
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
+    display: block;
+  }
+}
+
 /* Layer the bar just above the trays and above contextual link triggers. */
 .toolbar-oriented .toolbar-bar {
   z-index: 502;
@@ -88,10 +113,12 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 /* Present the admin toolbar tabs horizontally as a default on user agents that
  * do not understand media queries or on user agents where JavaScript is
  * disabled. */
+.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
 .toolbar .toolbar-bar .toolbar-tab,
 .toolbar .toolbar-tray-horizontal li {
   float: left; /* LTR */
 }
+[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
   float: right;
@@ -180,14 +207,9 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   display: none;
 }
 /* When the configured standard breakpoint is active and the tray is in a
- * horizontal position, the tray is fixed to the top of the viewport and does
- * not scroll with the page contents. */
-body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
-  position: fixed;
-}
-/* When the configured standard breakpoint is active and the tray is in a
  * vertical position, the tray does not scroll with the page. The contents of
- * the tray scroll within the confines of the viewport. */
+ * the tray scroll within the confines of the viewport.
+ */
 .toolbar .toolbar-tray-vertical.is-active,
 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
   height: 100%;
@@ -258,3 +280,13 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: left;
 }
+
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+  display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+  display: block;
+}
diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js
index 6e8f992..e7ef13f 100644
--- a/core/modules/toolbar/js/escapeAdmin.js
+++ b/core/modules/toolbar/js/escapeAdmin.js
@@ -40,7 +40,6 @@
         else {
           $toolbarEscape.text(Drupal.t('Home'));
         }
-        $toolbarEscape.closest('.toolbar-tab').removeClass('hidden');
       }
     }
   };
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 8accad9..61dddc2 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -52,7 +52,8 @@
         // Establish the toolbar models and views.
         var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
           locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')) || false,
-          activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID')))
+          activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
+          height: $('#toolbar-administration').outerHeight()
         });
         Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
           el: this,
diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 64593c9..654359d 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -17,7 +17,7 @@
      * @augments Backbone.View
      */
     initialize: function () {
-      this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
+      this.listenTo(this.model, 'change:orientation change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
     },
 
     /**
@@ -25,28 +25,15 @@
      */
     render: function () {
       var $body = $('body');
-      var orientation = this.model.get('orientation');
-      var isOriented = this.model.get('isOriented');
       var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
 
       $body
-        // We are using JavaScript to control media-query handling for two
-        // reasons: (1) Using JavaScript let's us leverage the breakpoint
-        // configurations and (2) the CSS is really complex if we try to hide
-        // some styling from browsers that don't understand CSS media queries.
-        // If we drive the CSS from classes added through JavaScript,
-        // then the CSS becomes simpler and more robust.
-        .toggleClass('toolbar-vertical', (orientation === 'vertical'))
-        .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
         // When the toolbar is fixed, it will not scroll with page scrolling.
         .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
         // Toggle the toolbar-tray-open class on the body element. The class is
         // applied when a toolbar tray is active. Padding might be applied to
         // the body element to prevent the tray from overlapping content.
-        .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'))
-        // Apply padding to the top of the body to offset the placement of the
-        // toolbar bar element.
-        .css('padding-top', this.model.get('offsets').top);
+        .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'));
     }
   });
 
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index f26c98c..265145f 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -45,9 +45,15 @@
     initialize: function (options) {
       this.strings = options.strings;
 
-      this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
+      // Put it at top to aviod extra reflow.
+      this.setToolbarHeight();
+      $('body').removeClass('toolbar-loading');
+
+      this.listenTo(this.model, 'change:activeTab  change:orientation change:isOriented change:isTrayToggleVisible', this.render);
       this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
       this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
+      this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented', this.updateToolbarHeight);
+      this.listenTo(this.model, 'change:height', this.setToolbarHeight);
 
       // Add the tray orientation toggles.
       this.$el
@@ -60,6 +66,40 @@
     },
 
     /**
+     * Update the toolbar element height.
+     *
+     * @constructs
+     *
+     * @augments Backbone.View
+     */
+    updateToolbarHeight: function () {
+      this.model.set('height', $('#toolbar-bar').find('.toolbar-tab').outerHeight() + $('.is-active.toolbar-tray-horizontal').outerHeight());
+    },
+
+    /**
+     * Set the toolbar element height.
+     *
+     * @constructs
+     *
+     * @augments Backbone.View
+     */
+    setToolbarHeight: function () {
+      $('#toolbar-administration').css({
+        height: this.model.get('height')
+      });
+      this.triggerDisplace();
+    },
+
+    // Trigger a recalculation of viewport displacing elements. Use setTimeout
+    // to ensure this recalculation happens after changes to visual elements
+    // have processed.
+    triggerDisplace: function () {
+      _.defer(function () {
+        Drupal.displace(true);
+      });
+    },
+
+    /**
      * @inheritdoc
      *
      * @return {Drupal.toolbar.ToolbarVisualView}
@@ -84,12 +124,7 @@
       if (this.model.changed.orientation === 'vertical' || this.model.changed.activeTab) {
         this.loadSubtrees();
       }
-      // Trigger a recalculation of viewport displacing elements. Use setTimeout
-      // to ensure this recalculation happens after changes to visual elements
-      // have processed.
-      window.setTimeout(function () {
-        Drupal.displace(true);
-      }, 0);
+
       return this;
     },
 
@@ -209,9 +244,16 @@
      */
     updateTrayOrientation: function () {
       var orientation = this.model.get('orientation');
+      var isOriented = this.model.get('isOriented');
+
       // The antiOrientation is used to render the view of action buttons like
       // the tray orientation toggle.
       var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
+
+      // Toggle body classes in early scripts execution to avoid toolbar flickering.
+      $('body').toggleClass('toolbar-vertical', (orientation === 'vertical'))
+        .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'));
+
       // Update the orientation of the trays.
       var $trays = this.$el.find('.toolbar-tray')
         .removeClass('toolbar-tray-horizontal toolbar-tray-vertical')
@@ -246,14 +288,8 @@
     adjustPlacement: function () {
       var $trays = this.$el.find('.toolbar-tray');
       if (!this.model.get('isOriented')) {
-        $trays.css('margin-top', 0);
         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
       }
-      else {
-        // The toolbar container is invisible. Its placement is used to
-        // determine the container for the trays.
-        $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
-      }
     },
 
     /**
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index 281f3ab..afa4d39 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -149,7 +149,7 @@ function toolbar_toolbar() {
       ),
     ),
     '#wrapper_attributes' => array(
-      'class' => array('hidden', 'home-toolbar-tab'),
+      'class' => array('home-toolbar-tab'),
     ),
     '#attached' => array(
       'library' => array(
@@ -277,6 +277,19 @@ function toolbar_menu_navigation_links(array $tree) {
 }
 
 /**
+ * Implements hook_preprocess_HOOK() for HTML document templates.
+ */
+function toolbar_preprocess_html(&$variables) {
+  if (!\Drupal::currentUser()->hasPermission('access toolbar')) {
+    return;
+  }
+
+  $variables['attributes'] = new Attribute(array(
+    'class' => ['toolbar-tray-open', 'toolbar-horizontal', 'toolbar-fixed', 'toolbar-loading'],
+  ));
+}
+
+/**
  * Returns the rendered subtree of each top-level toolbar link.
  *
  * @return array
diff --git a/core/themes/stable/css/toolbar/toolbar.module.css b/core/themes/stable/css/toolbar/toolbar.module.css
index 69eb7c2..f14f337 100644
--- a/core/themes/stable/css/toolbar/toolbar.module.css
+++ b/core/themes/stable/css/toolbar/toolbar.module.css
@@ -56,18 +56,43 @@
   position: relative;
   z-index: 1250;
 }
+.toolbar .toolbar-tray {
+  position: absolute;
+  width: 100%;
+  left: 0;
+}
 /* Position the admin toolbar absolutely when the configured standard breakpoint
  * is active. The toolbar container, that contains the bar and the trays, is
  * position absolutely so that it scrolls with the page. Otherwise, on smaller
  * screens, the components of the admin toolbar are positioned statically. */
-body.toolbar-fixed .toolbar-oriented,
-.toolbar-oriented .toolbar-bar,
-.toolbar-oriented .toolbar-tray {
+.toolbar-oriented .toolbar-bar {
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
+.toolbar-oriented .toolbar-tray {
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+/* Flickering fix */
+@media (min-width:61em) {
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+    position: relative;
+    display: block;
+    z-index: -999;
+    visibility: hidden;
+    width: 1px;
+  }
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+    width: 999em;
+  }
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
+    display: block;
+  }
+}
+
 /* Layer the bar just above the trays and above contextual link triggers. */
 .toolbar-oriented .toolbar-bar {
   z-index: 502;
@@ -88,10 +113,12 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 /* Present the admin toolbar tabs horizontally as a default on user agents that
  * do not understand media queries or on user agents where JavaScript is
  * disabled. */
+.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
 .toolbar .toolbar-bar .toolbar-tab,
 .toolbar .toolbar-tray-horizontal li {
   float: left; /* LTR */
 }
+[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
   float: right;
@@ -180,14 +207,9 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   display: none;
 }
 /* When the configured standard breakpoint is active and the tray is in a
- * horizontal position, the tray is fixed to the top of the viewport and does
- * not scroll with the page contents. */
-body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
-  position: fixed;
-}
-/* When the configured standard breakpoint is active and the tray is in a
  * vertical position, the tray does not scroll with the page. The contents of
- * the tray scroll within the confines of the viewport. */
+ * the tray scroll within the confines of the viewport.
+ */
 .toolbar .toolbar-tray-vertical.is-active,
 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
   height: 100%;
@@ -258,3 +280,13 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: left;
 }
+
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+  display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+  display: block;
+}