It's quite an odd problem I have. The effects display differently between localhost and the server, as illustrated below. Just a reminder: I'm using identical code for both environments.
When uploaded to the server, the fancybox is not properly scaled, and there is an unnecessary scrollbar despite the short content. https://i.sstatic.net/pcWXB.jpg
However, when running on localhost or a local computer, the fancybox scales nicely to fit the viewport with no scrollbar present. https://i.sstatic.net/aMFUc.jpg
Could someone please provide an explanation for this discrepancy? Is there a solution available to resolve my issue? Any advice from the community would be greatly appreciated. Thank you!
$(document).ready(function() {
$('.fancybox').fancybox();
});.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
...
... (CSS code continues)
...
... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/71835177135/jquery-fancybox.js"></script>
<a class="fancybox fancybox.iframe" href="iframe.html">Iframe</a>