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 pixel

Answer 1

This did it for me...

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

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

Answer 2

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

Answer 3

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)

Answer 4

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

}

Answer 5

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)

Answer 6

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.