Toolbar Anti-flicker seems to be conflicting with Bootstrap 8.x-3.0-rc2 theme (https://www.drupal.org/project/bootstrap).

Bootstrap appends style="top-padding:80px" to the <body> tag but when Toolbar Anti-flicker is enabled, the style bootstrap adds to body tag disappears and Toolbar Anti-flicker appends style="height:400px" to <div id="toolbar-administration">. This obviously causes a large gap between the admin toolbar and the page.

As an example, this is what Toolbar Anti-flicker adds style="height: 400px;":

<div id="toolbar-administration" class="toolbar toolbar-oriented" aria-label="Site administration toolbar" role="group" style="height: 400px;">

Whereas on other theme as such Bartik, Toolbar Anti-flicker adds height="80px", not height="400px". And this is fine.

I'm not entirely sure if this is a bootstrap issue or Toolbar Anti-flicker?

CommentFileSizeAuthor
issue.png52.37 KBonejam

Comments

duvien created an issue. See original summary.

  • droplet committed 8ce8486 on 8.x-2.x 
    Issue #2779317 by duvien, droplet: Sync BODY class in early stage of...
droplet’s picture

droplet commented
Status: Active » Fixed

Thank You!

Yes, it's Toolbar Anti-flicker bug. More accurately, it's a CORE bug.

Toolbar Anti-flicker is working with pre-made CSS Style. (and try not to make any new style changes with JS.) Bootstrap overrides Toolbar CSS in a less strict way that was changing the behaviors. (Trigged extra JS executions)

It's a code design pattern problem in Drupal.toolbar.BodyVisualView.

We shouldn't put all eggs in one bucket :)

onejam’s picture

onejam commented

Thank you for the fix. I can confirm it is fixed on Drupal 8.1.x

I also tested it against Drupal 8.2.0-beta but found it didn't work on this newer version.

droplet’s picture

droplet commented

I have a quick test and it still working well :) There're no code changes between D8.2 & 8.1 of Core's Toolbar Module.

Have you clear caches after the upgrade?

onejam’s picture

onejam commented
Status: Fixed » Closed (fixed)

That was odd. I had to clear a few times and then it worked. So yes, it is wokring on D8.2 as well.

Thanks,

droplet’s picture

droplet commented
Component: Miscellaneous » Code

It maybe not the Drupal issue. If you're using Chrome, try to close it completely next time. I found that sometimes don't clear cache correctly.

omd’s picture

omd commented

I've just updated to Drupal 10.4.1 and I'm seeing this issue. On front-end pages the toolbar is creating padding:

.toolbar-anti-flicker.toolbar-loading.toolbar-fixed.toolbar-horizontal.toolbar-tray-open body {
padding-top: 4.91331rem;
}

...making a huge white space above my toolbar. The CSS originates in toolbar.module.css from https://www.omnivex.com/core/themes/claro/css/components/toolbar.module.css. I'm certainly not using Claro on my front-end so I don't get why this is appearing only here. To make it more bizarre on the admin back-end pages where Claro is used the spacing is normal again.