diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 69eb7c2..7374547 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 .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+    position: relative;
+    display: block;
+    z-index: -999;
+    visibility: hidden;
+    width: 1px;
+  }
+  .toolbar-loading .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+    width: 999em;
+  }
+  .toolbar-loading .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;
@@ -180,14 +205,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 +278,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/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index 981ee00..625196d 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -93,8 +93,7 @@
 .toolbar-tray a:hover,
 .toolbar-tray a:active,
 .toolbar-tray a:focus,
-.toolbar-tray a.is-active
- {
+.toolbar-tray a.is-active {
   color: #000;
   text-decoration: underline;
 }
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/models/ToolbarModel.js b/core/modules/toolbar/js/models/ToolbarModel.js
index 537601d..0244d29 100644
--- a/core/modules/toolbar/js/models/ToolbarModel.js
+++ b/core/modules/toolbar/js/models/ToolbarModel.js
@@ -3,7 +3,7 @@
  * A Backbone Model for the toolbar.
  */

-(function (Backbone, Drupal) {
+(function ($, Backbone, Drupal) {

   'use strict';

@@ -154,4 +154,4 @@
     }
   });

-}(Backbone, Drupal));
+}(jQuery, Backbone, Drupal));
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..0b45065 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -17,9 +17,8 @@
      * @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);
     },
-
     /**
      * @inheritdoc
      */
@@ -43,10 +42,7 @@
         // 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 c3b0c85..8137ae3 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.setToolbalHeight();
+      $('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.updateToolbalHeight);
+      this.listenTo(this.model, 'change:height', this.setToolbalHeight);

       // Add the tray orientation toggles.
       this.$el
@@ -58,7 +64,37 @@
       // page load. This will call render.
       this.model.trigger('change:activeTab');
     },
-
+    /**
+     * Update the toolbar element height.
+     *
+     * @constructs
+     *
+     * @augments Backbone.View
+     */
+    updateToolbalHeight: 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
+     */
+    setToolbalHeight: 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
      *
@@ -84,12 +120,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;
     },

@@ -246,14 +277,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/src/Element/ToolbarItem.php b/core/modules/toolbar/src/Element/ToolbarItem.php
index b772193..88fa10b 100644
--- a/core/modules/toolbar/src/Element/ToolbarItem.php
+++ b/core/modules/toolbar/src/Element/ToolbarItem.php
@@ -81,7 +81,7 @@ public static function preRenderToolbarItem($element) {
         $element['tray']['#wrapper_attributes'] = array();
       }
       $element['tray']['#wrapper_attributes'] += $attributes;
-      $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray';
+      $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray toolbar-tray-horizontal';
     }

     $element['tab']['#attributes']['class'][] = 'toolbar-item';
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index 281f3ab..9a1e35c 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(
@@ -356,3 +356,12 @@ function _toolbar_get_subtrees_hash() {
   $hash = Crypt::hashBase64(serialize($subtrees));
   return [$hash, $cacheability];
 }
+
+function toolbar_preprocess_html(&$variables) {
+  if (!\Drupal::currentUser()->hasPermission('access toolbar')) {
+    return;
+  }
+
+  $attributes = isset($variables['attributes']) ? $variables['attributes'] : array();
+  if (!isset($attributes['class'])) {
+    $attributes['class'] = array();
+  }
+
+  $attributes['class'][] = 'toolbar-tray-open';
+  $attributes['class'][] = 'toolbar-horizontal';
+  $attributes['class'][] = 'toolbar-loading';
+
+  $variables['attributes'] = new Attribute($attributes);
+}
diff --git a/core/themes/stable/css/toolbar/toolbar.module.css b/core/themes/stable/css/toolbar/toolbar.module.css
index 69eb7c2..7374547 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 .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+    position: relative;
+    display: block;
+    z-index: -999;
+    visibility: hidden;
+    width: 1px;
+  }
+  .toolbar-loading .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+    width: 999em;
+  }
+  .toolbar-loading .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;
@@ -180,14 +205,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 +278,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/themes/stable/css/toolbar/toolbar.theme.css b/core/themes/stable/css/toolbar/toolbar.theme.css
index 981ee00..625196d 100644
--- a/core/themes/stable/css/toolbar/toolbar.theme.css
+++ b/core/themes/stable/css/toolbar/toolbar.theme.css
@@ -93,8 +93,7 @@
 .toolbar-tray a:hover,
 .toolbar-tray a:active,
 .toolbar-tray a:focus,
-.toolbar-tray a.is-active
- {
+.toolbar-tray a.is-active {
   color: #000;
   text-decoration: underline;
 }