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

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>

Answer 2

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.

Answer 3

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
}

Answer 4

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

Answer 5

You can disable the locking feature:

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

Worked for me.

Answer 6

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.