Magnific-popup: 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!

[jawinn]

My position:fixed main navigation in the background is still moving left and right when I open and close Magnific. Latest version v0.9.9 - 2013-11-15. Disabling the margin-right on HTML in Chrome has no affect on this. The FixedContentPos to false mentioned earlier stops the movement, but makes the popup worse to use, since it's scrolling everything in the background (and I've got a tall one-pager). I ended up having to use the fix mentioned previously to manually add padding to my main menu:

open: function() { $('body > header').css('padding-right', getScrollBarWidth() + "px"); }, close: function() { $('body > header').css('padding-right', 0); }
(Using a function to get scrollbar width here http://stackoverflow.com/a/19015262/835996)

[yaelsho]

I'm using version 0.9.9 and still the background is jump to the top of the page when closing the magnific gallery.
@jawinn where have you put the code above? I tried to insert it inside the gallery definition js:

gallery: {
open: function() { $('body > header').css('padding-right', getScrollBarWidth() + "px"); }, close: function() { $('body > header').css('padding-right', 0); },
enabled:true
}

but the background is still jumping.

Firefox is looking good, the issue seen in Chrome.

[JulianNorton]

I had to remove …transform: scale(2); for my animation.
That resolved my problem with content shifting.

[carasmo]

Without having to write an open and close function for each use of Magnific-Popup, can someone share some code to toggle the html and body class to something like: "mfp-open". Using this will allow me to toggle the fixed positioned divs to absolute, it works great but the only way I can think of is to add it to each use.

[mhulse]

I'm noticing a 15px addition to the html element when modal window is open:

Using v1.0.0 in Chrome Version 41.0.2272.118 (64-bit)

I'm developing a full screen app that never has scroll bars.

Looking like the below is the best fix?

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

That works, but just wanted to see if there's a better fix?

[callamwilliams]

     open: function() {
            $('html').css('padding-right', 15);
        },
    close: function() {
            $('html').css('padding-right', 0);
        }

just worked for me in chrome

[graphitivity]

I'm not using Magnific-Popup but i had same issue of jumping background so i thought this might help you guys... It's a pure css solution and I found it to be much easier this way the X position of the bg image should always start from left and keep the image size 100vw.

The only limitation is If you center the X position of the bg image the browser will try to center it when the scrollbar hides and there will be a jump.

here is the simple 2 line CSS solution you can use...

background: url(img/1.jpg) 0% 50% no-repeat fixed;
background-size: 100vw;

[feluxe]

@graphitivity If vw and vh weren't so buggy on some devices/browsers..

How about this:

If you have a full covering background element, like this one:

div.bg {
    background-image: url(xxx);
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

You can stop it from jumping by saving the window width before the popup action and put it on the element when the popup opens:

// Save initial bg size before Popup open.
var initialWidth = $(window).width();

// On popup open, put initial width on covering element.
$('.popup').magnificPopup({
    type: 'image',
    overflowY: 'scroll',
    callbacks: {
        open: function () {
            $('.bg').css('width', initialWidth +'px');
        }
    }
});

That way you don't need to calculate any scrollbar width.
And you don't need any action on close event, because nothing changed.

[Costellos]

I fixed an issue with bootstrap fixed top nav.

This is what I have:

$('.popup-btn').magnificPopup({ 
              // Delay in milliseconds before popup is removed
              removalDelay: 300,
              overflowY: 'scroll',

              // Class that is added to popup wrapper and background
              // make it unique to apply your CSS animations just to this exact popup
              mainClass: 'mfp-fade',
              callbacks: {open: function() {$('.navbar-fixed-top').css('overflow-y', 'scroll');},close: function() {$('.navbar-fixed-top').css('overflow-y', 'hidden');}}
            });

[andrewkyh]

@Costellos I was having issue with Bootstrap fixed navbar too. Now it fixed nicely, thank you so much!

[sadi304]

@Costellos , thanks man . It fixes the problem in bootstrap with fixed nav bar .

[Pau1fitz]

@mhulse this solution isnt working for me. Any ideas why? I am implementing the same code as you, and seeing the same problem in chrome.

$(document).ready(function(){
  $('.overlay-link').magnificPopup({
        type: 'inline',
        callbacks: {
            open: function() {
                $('html').css('margin-right', 0);
            }
        } 
    });
});

[mhulse]

Hi @Pau1fitz, I'd have to see the live code to be sure. Feel free to e-mail me a link. 👍

[Pau1fitz]

@mhulse it seems to have corrected itself, but thanks for the assistance.

[YaegerDesign]

I am still having this issue:
http://stackoverflow.com/questions/33222385/magnific-popup-causing-div-overlay-on-page-in-chrome-safari

It seems to be tied to a recent Chrome update. You can see an example of the issue while browsing the following page on the latest Chrome version:
http://surfaceartinc.com/accessories/hardware/triton-metal-profiles.html

[DigitalEnki]

@YaegerDesign your issue seems to be related to using

css body { overflow-x: hidden !important; }

It causes scrollbars to appear on the body when magnificPopup opens, try adding this:
css body.mfp-zoom-out-cur { overflow-y:hidden !important; }

[YaegerDesign]

@ChubbyNinja, I believe you are correct. However, your fix did not work. I removed the "overflow-x" from the body, instead. This was added by the mobile menu script, but it seems to be working fine without it.

[DigitalEnki]

Great :+1:

[petertwise]

FYI my own CSS contained:
html { width: 100%; }

Getting rid of this solved all of the issues related to the content jumping around with Magnific Popup.

[basselAhmed]

My solution to this was pure CSS
Just add

html {
    margin: 0 !important
}

NOTE: I am using Nicescroll plugin on the body, don't know if that makes any difference

[exilvm]

The following code fixed the issue:

$('.popup').magnificPopup({
  mainClass: 'mfp-scale',
  type: 'inline',
  preloader: false,
  callbacks: {
    open: function() {
      $('.navbar.fixed-top').css('overflow-y', 'scroll');
    },
    close: function() {
      $('.navbar.fixed-top').css('overflow-y', 'hidden');
    }
}
});