Skip to content
This repository has been archived by the owner on Feb 23, 2023. It is now read-only.

Preload iFrame resize produces scrollbar. #2555

Open
needfulthing opened this issue Feb 18, 2021 · 3 comments
Open

Preload iFrame resize produces scrollbar. #2555

needfulthing opened this issue Feb 18, 2021 · 3 comments

Comments

@needfulthing
Copy link

Describe the bug
When I open a fancybox in iFrame mode and "preload" is set (default = true), the fancybox and the iFrame are resized when the iFrame loads a new URL. This produces a small scrollbar in Chrome, because the height that gets set is 2 pixels less than the iFrame content's real height.

To Reproduce
Steps to reproduce the behavior:

  1. Create simple HTML with fancybox iFrame link.
  2. Open the iFrame fancybox in latest Chrome or FF.

Expected behavior
Calculate the proper height of the iFrame in each browser.

Desktop (please complete the following information):

  • OS: Windows 10
  • Latest Chrome / FF
  • 3.3.1

Additional context
When I add 2 to this calculation the vertical scrollbar vanishes:
Line 1928 in //cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.js

            if (frameHeight === undefined) {
              frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true))) + 2;
            }
@dock21
Copy link

dock21 commented Mar 10, 2021

hello

I have the same issue but +2 doesn't cut it. I even added +30 but I still have a vertical scroll bar on Chrome.

Could you please share your css and iframe call in html ?

Here is mine

$("[data-fancybox-panier]").fancybox({
		toolbar  : false,
        smallBtn : true,
       iframe : {
		  css : {
              width : '800px',
			  border: "7px solid #fff"
        }
      }
   });	

<a data-fancybox-panier data-type="iframe" data-src="http://xxx" href="javascript:;" >

I would really appreciate

many thanks

@needfulthing
Copy link
Author

I just use a very basic call:

	if ($.fancybox) {
		$('.Overlay').fancybox({
			clickSlide: false,
			type: 'iframe'
		});
	}

Have you tried to leave away your CSS parameters?

@fancyapps
Copy link
Owner

Usually, this is caused by top/bottom margins of body element or the first/last element.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants