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

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
}