Jquery - Fancybox - Background Page Shift Issue

Question

Fancybox is loading well and everything opens as I want it to, but the issue occurs in the background-- it's visible (and disturbing) that my entire page shifts exactly 8 pixels to the right when the box loads and returns to normal position on box closing.

I can't link to the site as it's on a dev server behind our company firewall.

I'm using the following scripts: Fancybox, Quform, and Jquery Banner Rotator. The fancybox call is occurring inside the rotator. I haven't modified any widths/heights of the original jquery fancybox CSS.

I have the body width set to 100% and margin set to auto, and internal divs with a min-width of 1138px and margin set to auto.

Does anyone know where I should look to fix the issue?

most likely because the height of your page it doesn't create vertical scroll bars but fancybox creates them so it shifts the page to make room for them. You may try adding a CSS `overflow-y: scroll;` to the body tag. — JFK, Sep 27 '12 at 21:15
Thanks, I tried that, didn't work. I'll keep plugging away at it. Could be the overlay that Fancybox is trying to create might be the issue, I'm just going to have to narrow it down. — Charlene Yount Runge, Sep 28 '12 at 18:25
BTW, you never said what version of fancybox and with what browser you have to issue. You can check this http://stackoverflow.com/a/9203557/1055987 if it helps. — JFK, Oct 01 '12 at 04:06
same http://stackoverflow.com/questions/9924495/when-a-fancybox-2-is-activated-a-scrollbar-flashes-on-the-parent-page-causing-t/12798575#12798575 — user1634982, Oct 09 '12 at 11:25

score 25 · Answer 1 · edited Apr 02 '16 at 03:27

25

I had a very similar situation recently with Fancybox v2. My initial page had content below the fold and therefore had a scrollbar (perhaps the OP did as well, it's not clear). Firing the Fancybox link caused the same shift in page body and clearing the scrollbar; closing the Fancybox image shifted the body back and re-enabled the scrollbar.

The adjustments to .fancybox-lock did not work for me but what did was including the following option when instantiating my Fancybox object:

helpers: { 
    overlay: { 
        locked: false 
    } 
}

The only caveat is this does not lock your Fancybox to the center of the page if you had scrolling, i.e. the page with Fancybox view is entirely scrollable. For me, it was the lesser of two evils.

edited Apr 02 '16 at 03:27

David Rodrigues

12,041
16
62
90

answered Feb 13 '13 at 18:40

Victor

1,157
12
12

Wow thank you, this saved me from pulling my hair out. Great work. – Tez Wingfield Jan 16 '15 at 20:37
Note: this caused other issues for me. The overlay was opening too low, and was disappearing when the browser was sized down. It did fix the shift issue though. – Evan Aug 25 '15 at 20:22

score 7 · Answer 2 · answered Oct 03 '12 at 04:58

7

I had the same issue recently. Find .fancybox-lock in the fancybox CSS, and change it to:

.fancybox-lock {
    overflow: hidden;
    margin: 0 !important;
    }

Voila! :D

answered Oct 03 '12 at 04:58

designosis

5,182
1
38
57

score 4 · Answer 3 · answered May 12 '15 at 09:27

4

You can disable the locking feature:

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

Worked for me.

answered May 12 '15 at 09:27

MulOnPomm

145
3
16

This caused other issues for me. The overlay was opening too low, and was disappearing when the browser was sized down. It did fix the shift issue though. – Evan Aug 25 '15 at 20:21

scrypter · Answer 4 · 2014-06-27T23:48:51.350

It's a known problem, here you can find out more: issues, fancyapps @ GitHub

I'm using fancybox2 (version 2.1.5). I've solved the problem by slightly modifying the 'jquery.fancybox.css'-file:

Find the 'Overlay helper'-section (starts at line 165) and change two rules:

.fancybox-lock {
/*  overflow: hidden !important;*/
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    width: auto;
}

and the second rule:

.fancybox-lock .fancybox-overlay {
/*  overflow: auto;
    overflow-y: scroll;*/
    overflow: hidden !important;
}

This works fine enough (imho), although the page is scrollable behind the overlay.

At least the disturbing 'shifting right'-effect is suppressed.

I discovered later that elements which were positioned with "right: 0;" were shifted to the left by the width of the vertical scrollbar.

That is because of a margin-right is set by the fancybox.js-code by appending a style-node inside the head-element.

To fix the problem just modify a single line of code inside the jquery.fancybox.js file or the jquery.fancybox-2.1.5-pack.js file, depending on which one you are using.

in line 2017 of the unpacked version:

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");

// change it to

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head");

// perhaps comment out the complete line, I haven't testet it though

or in the .pack-file (line 46 near EOL):

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

// change it to:

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery);

// or try to remove the "f().appendTo()"-part completely (untested)

score 2 · Answer 5 · answered May 31 '13 at 13:30

2

I just solved it by adding "margin-right: auto !important" to my body element :) This over rules Fancyboxes own margin-right: 0.

answered May 31 '13 at 13:30

Tony Gustafsson

828
1
7
18

score 0 · Answer 6 · answered Apr 18 '13 at 13:13

In version 2.1.3, comment out lines 1802-1807 (below) in jquery.fancybox.js.

if (!this.overlay) {

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false;

this.el     = document.all && !document.querySelector ? $('html') : $('body');

this.create(opts);

}

score 0 · Answer 7 · answered May 15 '13 at 09:27

I used fancybox v.2.1.4 with a fixed, centered background image for the body, and forcing vertical scrollbar to always showing.

body{
  background: url('../img/sfondo.jpg') fixed center top;
  overflow-y: scroll;
}

Despite having forced the display of scrollbar, I had the background-image shift problem with firefox on mac (chrome and safari were ok since lion scrollbars don't take space inside the page) and ie,ff,chrome on windows.

So I noticed that if I manually set the x-offset instead of the world center on the background property the issue was gone, so I managed it with a little of jquery in the HEAD of the page:

<script>
    function centerTheBackground(){
        var pageWidth = $(window).width();
        var imageWidth = 1920; //set here the width of the background image
        var xOffset = (imageWidth/2) - (pageWidth/2);
        jQuery('body').css('background-position', '-' + xOffset + "px top");
    }


    jQuery(function($){
        centerTheBackground();
    });


    $(window).resize(function() {
        centerTheBackground(); //re-center the background image during window resizing
    });             
</script>

score 0 · Answer 8 · edited Nov 16 '16 at 02:55

0

Well I just commented the following line in fancybox CSS

/*.fancybox-lock {
    overflow: hidden;
}
*/

And it started to work fine on:

fancyBox - jQuery Plugin
version: 2.1.4 (Thu, 10 Jan 2013)

edited Nov 16 '16 at 02:55

Quentin Skousen

1,035
1
18
30

answered May 05 '15 at 10:55

Cristiano Nunes

1

score 0 · Answer 9 · answered Sep 26 '15 at 20:02

0

This did it for me...

.fancybox-lock {
        overflow: hidden !important;
        padding-right: 17px;
}

.fancybox-lock body {
    overflow: hidden !important;
}

answered Sep 26 '15 at 20:02

Deefer

1

score 0 · Answer 10 · answered Dec 22 '15 at 12:59

You are facing that problem for scrollbar! just trace the scrollbar width and use that width as '.fancybox-lock's 'margin-right'. for example,

.fancybox-lock{
       margin-right: [your calculated width] !important;
 }

This will solve your problem for sure, because i also had that problem once.

score 0 · Answer 11 · answered Oct 13 '16 at 13:52

0

If your problem is fixed elements jumping when Fancybox opens, simple add a padding-right: 17px to those elements in your CSS, contained in the .fancybox-lock class.

answered Oct 13 '16 at 13:52

DrSiemer

141
1
5

score 0 · Answer 12 · answered Aug 13 '17 at 05:45

0

I'm using fancy box 3 and had the same problem all because my main wrapper was position absolute.

make sure you wrapper is not and it should work fine.

answered Aug 13 '17 at 05:45

Timothy

1,128
1
14
28

score 0 · Answer 13 · answered Sep 17 '20 at 17:46

My solution for "@fancyapps/fancybox": "^3.5.7":

@import '@fancyapps/fancybox';

.fancybox-active {
  height: 500px; // fix fancybox showing skiplinks
}

.compensate-for-scrollbar {
  margin-right: auto !important; // fix fancybox messing body's margin: 0 auto
}

body.compensate-for-scrollbar {
  overflow: auto; // fix fancybox jerking background because of hiding scrollbar
}

Jquery - Fancybox - Background Page Shift Issue

13 Answers13

Linked