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.
Edit: I’m on Chrome.
3 Likes
This occurs because we hide the browser scrollbar when you open a lightbox.
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.
6 Likes
Yes, that’s what I suspected. But why the rest of the content is not affected by this?
2 Likes
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.
7 Likes
Ok, thank you for the explanations. 
2 Likes