Preload iFrame resize produces scrollbar.

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:

Create simple HTML with fancybox iFrame link.
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;
            }

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

I just use a very basic call:

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

Have you tried to leave away your CSS parameters?

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

Navigation Menu

Repository navigation

Preload iFrame resize produces scrollbar. #2555

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Preload iFrame resize produces scrollbar. #2555

Description

Activity

dock21 commented on Mar 10, 2021

needfulthing commented on Mar 13, 2021

fancyapps commented on Mar 13, 2021

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions