In a UX-focused thread titled ‘Need help to solve minute CSS issue,’ Pravi reports that clicking an image causes the .d-header to shift 2px due to scrollbar disappearance in lightbox mode. Canapin and RGJ confirm the issue has existed for years across Discourse themes. david and Canapin identify that fixed-positioned headers don’t inherit the margin-right added to <body> to compensate for scrollbar width. Canapin traces the behavior to jquery.magnific-popup.min.js. awesomerobot explains the root cause: fixed elements are viewport-relative, and scrollbar removal changes viewport width. They suggest a CSS workaround involving left and width adjustments based on scrollbar width, noting that position: sticky (post-IE11) will resolve this. codinghorror requests a reminder for the sticky migration. Pravi asks for a timeline. Steven offers a partial desktop CSS fix using transform: translateX(-8px) for .d-header > .wrap, acknowledging minor remaining movement. Finally, awesomerobot confirms the issue is resolved as Discourse now uses position: sticky for headers.
Hi friends,
I need some help with CSS. Whenever I click on any image in my site, the .d-header displaces by about 2px. I tried my best to fix it but failed. I don’t know how to fix the CSS of the greyed out portion behind the image.
Click an image in the below link to see the issue:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
Interesting. I didn’t ever notice this, but it also appears on most (if all) Discourse official themes as long as the header is sticked and the scrollbar disappear.
Maybe it’s a recent issue?
Nope, it has been like that for many, many years. I have a v1.6 lying around for testing purposes and it happens on there as well.
Bummer.
@Pravi I don’t thank you, now I can’t un-see the issue my brain ignored all these years 
I think it could be because the browser scrollbar disappears when the lightbox is open.
Same here 
Is there anything easy we could do to stop this @awesomerobot? This seems to affect only the header, not the main body 
It seems to appear when the scrollbar disappear AND the body has the class docked (which is a bitt different from when the header is sticky).
I can’t believe, I am the only one noticed it after all these years 
. I changed the category from support to bug.
I think the issues comes from that when the scrollbar disappear, style="margin-right: 17px; overflow: hidden; is applied on body to compense the scrollbar width.
But .d-header being in fixed position, it doesn’t “inherits” the html margin-right.
edit:
It seems that the html margin (equals the scrollbar width) is calculated via javascript through jquery.magnific-popup.min.js.
I’m not sure there is any quick and clean solution to fix this.
Happens to the composer too if you want something else to be annoyed about 
The problem is that fixed elements are positioned relative to the viewport width, and scrollbars change the viewport width.
Like @Canapin mentions, this is compensated for on <HTML> with an extra margin (looks like magnific popup behavior?)… since fixed elements aren’t relative to <HTML> the composer and header would need an additional fix.
What we’d need to do is take the width of scrollbar and then when the popup is activated we’d add some inline styles like:
.d-header {
left: -15px; /* 15px wide scrollbar in this example */
width: calc(100% + 30px); /* add 2x scrollbar width to compensate for shift & width */
}
Implementing this is a little beyond me… I think scrollbar width is probably calculated by comparing the width of the page before & after the popup? Not 100% sure.
All that being said… this will be slightly less of an issue if we move to position: sticky after dropping IE11 support this year. The shift would no longer happen, but there might be a gap to the right of the header where the scrollbar used to be.
Can we set a bookmark reminder so we know that happens for sure? The sticky support, I mean 
When is this thing going to fix?
I have a little fix for you, it’s not perfect, there still some movement on the title, the category and the headers-icons, but the header bar will stay in place.
On desktop css
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
I didn’t test this through and it’s not something official at all, but for now you can try it. I’m not experienced enough to find a better solution off the top of my head
The problem in the OP no longer happens because we use position:sticky; on the header now. 