# 打开图片画廊时，页头向右偏移

**URL:** <https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132>\
**Category:** UX\
**Created:** [2019年三月20日 08:07 UTC](https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132 "2019-03-20T08:07:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rlb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rlb/32/133546_2.png) [@rlb](https://meta.discourse.org/u/rlb)\
**Post date:** [2019年三月20日 08:07 UTC](https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132/1 "2019-03-20T08:07:16Z")

</div>

Hi,

When you want to see a big image in full screen, **header is shifted** by a few pixels **to the right** of the screen.

 ![header-shift-right](https://global.discourse-cdn.com/meta/original/3X/7/2/720014ef9230bc48680ba3fbd0e3f39978801683.jpeg)

**Edit:** I’m on Chrome.

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年三月20日 08:34 UTC](https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132/2 "2019-03-20T08:34:06Z")

</div>

This occurs because we hide the browser scrollbar when you open a lightbox.

 ![scrollbar](https://global.discourse-cdn.com/meta/original/3X/e/8/e812d35ff38570c4f8f25cb6357f169a39baf704.png)

 ![no-scrollbar](https://global.discourse-cdn.com/meta/original/3X/f/d/fdaa8cb306d9f0a13a283c841aa3ee679849145f.jpeg)

Given that the scrollbar width is different on different browsers on different platforms, it makes sense to leave this as is for now since the visual inconsistency is not _very_ noticeable unless you’re looking directly at it.

---

<div class="post-metadata">

**Author:** ![rlb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rlb/32/133546_2.png) [@rlb](https://meta.discourse.org/u/rlb)\
**Post date:** [2019年三月20日 08:49 UTC](https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132/3 "2019-03-20T08:49:26Z")

</div>

> [@Johani](#):
>
> This occurs because we hide the browser scrollbar when you open a lightbox.

Yes, that’s what I suspected. But why the rest of the content is not affected by this?

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年三月20日 09:53 UTC](https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132/4 "2019-03-20T09:53:10Z")

</div>

Well, that’s a good question.

The answer is because Magnific-popup - the dependency the handles galleries in Discourse - actually does what I described above. It checks the width of the scrollbar in the current browser and then compensates with inline margins.

> <https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.js#L754-L756>

> <https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.js#L804-L814>

> <https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.js#L320-L325>

This works well for the content of the page, but the fact that the header in Discourse is positioned with CSS - absolute and then fixed when you scroll down - means that things don’t come out right for it. So, you get the issue you described.

So, the options are:

1- **manually compensate with CSS**  
this doesn’t work because of different scrollbar widths.

2- **maintain a fork of Magnific-popup that fixes this**  
this is out of the question.

3- **duplicate the scrollbar width calculation in Discourse**  
this is way too much code for a simple visual inconsistency.

4- **leave this as is because how involved a fix would be V.S the benefits of adding it.**

I still think #4 is the way to go here, at least for now.

---

<div class="post-metadata">

**Author:** ![rlb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rlb/32/133546_2.png) [@rlb](https://meta.discourse.org/u/rlb)\
**Post date:** [2019年三月20日 10:06 UTC](https://meta.discourse.org/t/header-shifts-to-the-right-when-you-open-image-gallery/112132/5 "2019-03-20T10:06:45Z")

</div>

> [@Johani](#):
>
> I still think #4 is the way to go here, at least for now.

Ok, thank you for the explanations. 🙂