Jumping background #125

Closed
universaldenmark opened this Issue Jun 22, 2013 · 32 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@chodorowicz

chodorowicz Jun 23, 2013

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.

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

This comment has been minimized.

Show comment
Hide comment
@universaldenmark

universaldenmark Jun 24, 2013

Thanks! Hope this gets fixed one day

Thanks! Hope this gets fixed one day

@dimsemenov

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Jun 24, 2013

Owner

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

Owner

dimsemenov commented Jun 24, 2013

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

@universaldenmark

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Jun 25, 2013

Owner

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

Owner

dimsemenov commented Jun 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@universaldenmark

universaldenmark Jun 25, 2013

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

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

@chodorowicz

This comment has been minimized.

Show comment
Hide comment
@chodorowicz

chodorowicz Jun 26, 2013

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.

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

This comment has been minimized.

Show comment
Hide comment
@chodorowicz

chodorowicz Oct 23, 2013

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 ?

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

This comment has been minimized.

Show comment
Hide comment
@universaldenmark

universaldenmark Oct 25, 2013

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

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

@chodorowicz

This comment has been minimized.

Show comment
Hide comment
@chodorowicz

chodorowicz Oct 25, 2013

@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

@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

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Oct 26, 2013

Owner

@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.

Owner

dimsemenov commented Oct 26, 2013

@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.

@dimsemenov dimsemenov reopened this Oct 26, 2013

@chodorowicz

This comment has been minimized.

Show comment
Hide comment
@chodorowicz

chodorowicz Oct 28, 2013

@dimsemenov Great, thanks for that!

@dimsemenov Great, thanks for that!

@jawinn

This comment has been minimized.

Show comment
Hide comment
@jawinn

jawinn Nov 17, 2013

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)

jawinn commented Nov 17, 2013

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

This comment has been minimized.

Show comment
Hide comment
@yaelsho

yaelsho Jun 2, 2014

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.

yaelsho commented Jun 2, 2014

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

This comment has been minimized.

Show comment
Hide comment
@JulianNorton

JulianNorton Jun 8, 2014

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

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

@carasmo

This comment has been minimized.

Show comment
Hide comment
@carasmo

carasmo Nov 11, 2014

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.

carasmo commented Nov 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mhulse

mhulse Apr 7, 2015

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

screen shot 2015-04-07 at 11 03 06 am

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?

mhulse commented Apr 7, 2015

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

screen shot 2015-04-07 at 11 03 06 am

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

This comment has been minimized.

Show comment
Hide comment
@callamwilliams

callamwilliams Jun 18, 2015

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

just worked for me in chrome

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

just worked for me in chrome

@graphitivity

This comment has been minimized.

Show comment
Hide comment
@graphitivity

graphitivity Jun 22, 2015

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;

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

This comment has been minimized.

Show comment
Hide comment
@feluxe

feluxe Jul 25, 2015

@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.

feluxe commented Jul 25, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@Costellos

Costellos Aug 18, 2015

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');}}
            });

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

This comment has been minimized.

Show comment
Hide comment
@andrewkyh

andrewkyh Sep 9, 2015

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

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

@sadi304

This comment has been minimized.

Show comment
Hide comment
@sadi304

sadi304 Sep 22, 2015

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

sadi304 commented Sep 22, 2015

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

@AndreiMaz AndreiMaz referenced this issue in nopSolutions/nopCommerce Apr 6, 2016

Closed

Default Clean theme has issues with Magnific Popup #1334

@Pau1fitz

This comment has been minimized.

Show comment
Hide comment
@Pau1fitz

Pau1fitz Sep 8, 2016

@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);
            }
        } 
    });
});

Pau1fitz commented Sep 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@mhulse

mhulse Sep 8, 2016

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

mhulse commented Sep 8, 2016

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

@Pau1fitz

This comment has been minimized.

Show comment
Hide comment
@Pau1fitz

Pau1fitz Sep 15, 2016

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

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

@YaegerDesign

This comment has been minimized.

Show comment
Hide comment
@YaegerDesign

YaegerDesign Apr 25, 2017

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

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

@ChubbyNinja

This comment has been minimized.

Show comment
Hide comment
@ChubbyNinja

ChubbyNinja Apr 25, 2017

Collaborator

@YaegerDesign your issue seems to be related to using

body {
    overflow-x: hidden !important;
}

It causes scrollbars to appear on the body when magnificPopup opens, try adding this:

body.mfp-zoom-out-cur {
    overflow-y:hidden !important;
}
Collaborator

ChubbyNinja commented Apr 25, 2017

@YaegerDesign your issue seems to be related to using

body {
    overflow-x: hidden !important;
}

It causes scrollbars to appear on the body when magnificPopup opens, try adding this:

body.mfp-zoom-out-cur {
    overflow-y:hidden !important;
}
@YaegerDesign

This comment has been minimized.

Show comment
Hide comment
@YaegerDesign

YaegerDesign Apr 26, 2017

@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.

@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.

@ChubbyNinja

This comment has been minimized.

Show comment
Hide comment
@ChubbyNinja

ChubbyNinja Apr 26, 2017

Collaborator

Great 👍

Collaborator

ChubbyNinja commented Apr 26, 2017

Great 👍

@squarecandy

This comment has been minimized.

Show comment
Hide comment
@squarecandy

squarecandy Apr 28, 2017

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.

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

This comment has been minimized.

Show comment
Hide comment
@basselAhmed

basselAhmed Apr 5, 2018

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment