I am using fancybox (version 3.5.7) for some image galleries on a joomla-website. It works great untill a small shift of the entire body of the thumbnail-page on opening the page, on opening the fancybox-modal and on closing it. The page is shifting for a very short time and comes afterwards back to its original position (see effect on http://www.fischer-club.ch/index.php/unser-verein/retro-fotos/1966-training-am-sonntag). How can I avoid this shift?
I am using fancybox in combination with another jQuery script called masonry. I tried to deactivate the masonry script, but the shift still occurs. I've also tried different solutions from other posts to shift-problems with fancybox, but they are mostly regarding the version 2 of fancybox, so that nothing helped. The shift occurs on different browsers but not on smartphones. Thanks for any help!
The script hides page scrollbars by default by applying overflow: hidden; for body element. Since that causes body element to expand to fill free space, the script also calculates width of the vertical scroll bar and uses that value to set right margin for body element. That works very well (as you can see on homepage and all demos), but this can be disrupted by adding some additional CSS rules, for example, by setting 100% width for body element.
The solution would be to remove (usually unnecessary) CSS rules that breaks default workflow or by setting $.fancybox.defaults.hideScrollbar = false; to prevent hiding page scrollbars.
Edit: In your case, the page shift is caused by this CSS rule:
body {
transition: all 400ms ease;
}
E.g., you are animating everything, even margin-right added by the fancybox. So, either remove that CSS rule that or change all to width or whatever you wish to animate.