Position bar in default placement is offset to left, except for admin users

[yorkshire-pudding]

Steps to reproduce

1. add tocbot to site
2. Add content with structured headings
3. Add tocbot block to layout in right sidebar
4. Compare page while logged in and when logged out - start at top position and scroll so the block goes 'fixed'

Expected results
Vertical position bar runs directly below the left hand side of the first letter of title (e.g. Contents)
Same position for logged in and logged out
When scroll down, then stays in same place

Actual result
For logged out users the bar is offset to left until the block goes 'fixed' position then it goes to the right place

For logged in users, the bar is in the right place in the default position and when the block goes 'fixed' position

Attempts to deduce cause

• My theme? - same in brand new lando site with basis
• Browser - same in Chrome and Firefox
• Turn off caching - same
• Turned off Aggregate CSS and JS - same
• compare CSS produced - identical in logged out and logged in.

[olafgrabienski]

Thanks for your report – this issue looks like a tricky one, no idea so far why it's happening!

I noticed one interesting thing, though: If you're not logged in to your Backdrop site as administrator and inspect the element .toc-link::before with your browser's dev tools and have a look at the box-sizing visualization, you'll see quite different position numbers for the default and the fixed Tocbot state:

Default:

Fixed:

These differences aren't visible if you are logged in as admin to the Backdrop site. So, the position behavior seems related to this issue, but why?

[olafgrabienski]

If you're not logged in to your Backdrop site as administrator ...

Testing the issue, I noticed that logging in fixes it only for users with the administrator role. If you log in as an editor, the strange position behavior continues. I'm curious if we can boil this down to a particular permission or something else more specific than the role.

[yorkshire-pudding]

Thanks for investigating @olafgrabienski - this is curious - I didn't think to test with non-admin user.

[yorkshire-pudding]

The permission appears to be "Administer Layouts" 😕 - very confusing

[olafgrabienski]

I'm curious if we can boil this down to a particular permission ...

Yep, just noticed this myself. To be more precise, Administer Layouts and Use contextual links. So, I guess the contextual link CSS and/or JavaScript affects the position.

[yorkshire-pudding]

I'd added that previously and nothing happened, but guess that's because the permission to do anything wasn't there so no links were being invoked.

[yorkshire-pudding]

Looks to be the position: relative; line in contextual-links-region that fixes it.

.contextual-links-region {
    outline: none;
    position: relative;
}

[olafgrabienski]

Yes ... without the contextual links region the Tocbot block is static, and that makes the difference for the position issue of the elements.

[yorkshire-pudding]

Adding

.js-toc-block {
  position: relative;
}

into tocbot-style.css seems to work

[olafgrabienski]

@yorkshire-pudding Thanks again, I've merged your PR.