Need help to solve minute CSS issue

UX
1

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.

imageedit_2_6917537964
imageedit_2_69175379641000×540 122 KB

Click an image in the below link to see the issue:

5 Likes
2

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?

3

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.

5 Likes
4

Bummer.
@Pravi I don’t thank you, now I can’t un-see the issue my brain ignored all these years :smile:

1 Like
5

I think it could be because the browser scrollbar disappears when the lightbox is open.

Same here :sweat_smile:

Is there anything easy we could do to stop this @awesomerobot? This seems to affect only the header, not the main body :thinking:

4 Likes
6

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). :thinking:

1 Like
7

I can’t believe, I am the only one noticed it after all these years :crazy_face:. I changed the category from support to bug.

1 Like
8

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. :thinking:

3 Likes
11

Happens to the composer too if you want something else to be annoyed about :stuck_out_tongue_winking_eye:

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.

6 Likes
12

Can we set a bookmark reminder so we know that happens for sure? The sticky support, I mean :wink:

4 Likes
13

When is this thing going to fix?

14

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

2 Likes
15

The problem in the OP no longer happens because we use position:sticky; on the header now. :tada:

3 Likes