CSS changes introduced into stable theme to support toolbar anti-flicker

In order to improve the front-end performance of the toolbar, removing the flicker or jump as page elements shifted while the page was being rendered in the browser, some minor CSS changes have been introduced into the toolbar module. To ensure these changes reach the widest group of users possible and due to the low impact nature of the changes, they have also been added to the stable theme.

Toolbar body classes

Three default BODY classes were previously added by javascript in the frontend and are now already present in the default backend HTML output instead. This makes zero changes to the final visual appearance. The classes are:

.toolbar-tray-open
.toolbar-horizontal
.toolbar-fixed

CSS rules adjusted

Some critical CSS rules were changed to rely on these default classes from HTML output rather than the selectors added by JavaScript. We now use body.toolbar-horizontal rather than the previous nested classes like .toolbar .toolbar-tray-horizontal.

For example, you can perform "Search & Replace" to fix your custom theme's stylesheet:
Search: .toolbar .toolbar-tray-horizontal
Replace: .toolbar-horizontal .toolbar-tray

In order to minimize disruption, CSS changes in the toolbar module and stable theme were kept as small as possible. In your own themes or modules we highly recommended you always use .toolbar-horizontal or .toolbar-vertical.

Toolbar loading class introduced

We introduced a .toolbar-loading class to indicate the Toolbar loading state and target this class to mitigate the flicker during loading. This class .toolbar-loading is removed once the toolbar is fully loaded.

Margin/padding on the toolbar's parent elements

Modules or themes trying to add margin or padding to the BODY / HTML tag or toolbar's parent class (e.g. #toolbar-administration) may have their appearance disrupted as a consequence of these changes. The solution is to add corresponding offsets to the toolbar.

For example, if you need to have a rule

  body {
    margin-top: 15px;
  }

then also have rules

body.toolbar-loading {
    margin-top: 0;
  }
  .toolbar-loading #toolbar-administration {
    margin-bottom: 15px;
  }