-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jumping background #125
Comments
Yep, I have this problem all the time and cannot find good solution I've been using:
or setting scrollbars always visible. |
Thanks! Hope this gets fixed one day |
Hi guys, can you please provide the link to page with issue, or isolate the problem by forking one of the CodePen examples. |
Sure :) You can see it here: http://www.cphrecmedia.dk/musikdk/stage/ |
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 |
Ahh that sounds reasonable. I'll check it out! |
I have follow up question, if I may. Isn't the problem that you're adding padding to the |
I see you've changed the way you handle this - now you're adding compesation to |
@chodorowicz I tried to do it in Chrome Inspector, but it didn't change anything? |
@MusikDK I was directing my remark to dismenow @dimsemenov - I should have mentioned him (I've corrected that). |
@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 Great, thanks for that! |
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:
|
I'm using version 0.9.9 and still the background is jump to the top of the page when closing the magnific gallery. gallery: { but the background is still jumping. Firefox is looking good, the issue seen in Chrome. |
I had to remove …transform: scale(2); for my animation. |
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. |
I'm noticing a 15px addition to the 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? |
just worked for me in chrome |
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; |
@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:
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:
That way you don't need to calculate any scrollbar width. |
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');}}
}); |
@Costellos I was having issue with Bootstrap fixed navbar too. Now it fixed nicely, thank you so much! |
@Costellos , thanks man . It fixes the problem in bootstrap with fixed nav bar . |
@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.
|
Hi @Pau1fitz, I'd have to see the live code to be sure. Feel free to e-mail me a link. 👍 |
@mhulse it seems to have corrected itself, but thanks for the assistance. |
I am still having this issue: 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: |
@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;
} |
@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. |
Great 👍 |
FYI my own CSS contained: Getting rid of this solved all of the issues related to the content jumping around with Magnific Popup. |
My solution to this was pure CSS html {
margin: 0 !important
} NOTE: I am using Nicescroll plugin on the body, don't know if that makes any difference |
The following code fixed the issue:
|
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"
The text was updated successfully, but these errors were encountered: