Jumping background

[universaldenmark]

Because the scrollbar disappears in the background, when using the lightbox, all content jumps around in the back. Would it be possible to make some kind of smart reversion, so all content stays in place? It looks a little bit "broken"

[chodorowicz]

Yep, I have this problem all the time and cannot find good solution

I've been using:

callbacks: {
  open: function() {
    $('body').css('padding-right', 0);
  }
}

or setting scrollbars always visible.
I cannot wrap around my head really why the plugin adds this scrollbar compensation all the time.

[universaldenmark]

Thanks! Hope this gets fixed one day

[dimsemenov]

Hi guys, can you please provide the link to page with issue, or isolate the problem by forking one of the CodePen examples.

[universaldenmark]

Sure :) You can see it here: http://www.cphrecmedia.dk/musikdk/stage/

[dimsemenov]

As scrollbar is removed and replaced with padding, fixed positioned elements will jump, as they rely on global viewport and ignore padding. There is no workaround, except manually adding padding to them to.

But you may disable such "scrollbar removal" by disabling fixed positioning option http://dimsemenov.com/plugins/magnific-popup/documentation.html#fixedcontentpos

[universaldenmark]

Ahh that sounds reasonable. I'll check it out!

[chodorowicz]

I have follow up question, if I may. Isn't the problem that you're adding padding to the body, instead of adding margin to html element? Fancybox is adding in second way (to compensate scrollbar) and the problem with shifting background doesn't exist, because adding padding to body shifts everything except body background. Adding margin to html shifts everything, including body's background.

[chodorowicz]

I see you've changed the way you handle this - now you're adding compesation to html. But it's still padding not margin - wouldn't it be better to add margin-right: 17px ?

[universaldenmark]

@chodorowicz I tried to do it in Chrome Inspector, but it didn't change anything?

[chodorowicz]

@MusikDK I was directing my remark to dismenow @dimsemenov - I should have mentioned him (I've corrected that).
Anyway, I've created pen with an example. You can see there background set to body and buttons which add overflow: hidden to html and add padding/margin to compensate this absent scrollbar. In case of margin you can see that there no shift and in case of padding you can observe of shift over relative positions of black box and background.

http://codepen.io/chodorowicz/pen/Cgqkw

[dimsemenov]

@chodorowicz Thank you, looks like you're right. I'm not sure if I remember why I chosen padding instead of margin for this. I'll push a patch soon.

[chodorowicz]

@dimsemenov Great, thanks for that!