Iframe Resizer initial resize height is slightly smaller until I click

Viewed 587

I’m using the Iframe resizer library (https://github.com/davidjbradshaw/iframe-resizer) with angular 9 for both apps (host and child app).

For one of the pages that loads, it seems to cut off 100 px from the calculated height. Once I click on the page, it detects a mouse down event and re calculates the height to the correct size.

I’m using heightCalculationMethod with the value “taggedElement” and have body data-iframe-height inserted in the child index html.

When I turn on logging I’m seeing the following:

Initial Load:

[iFrameSizer][iframe] height calculation method set to "taggedElement"

[iFrameSizer][iframe] HTML & body height set to "auto"

[iFrameSizer][iframe] Sending message to host page (iframe:3793.50830078125:1140:init)

After Click:

[iFrameSizer][iframe] Trigger event: Mouse Down

[iFrameSizer][iframe] Parsed 1 HTML elements

[iFrameSizer][iframe] Sending message to host page (iframe:3892.144775390625:1140:resizeParent)

Not sure why the DOM is cutting off 100 px on the initial load and when it recalculates when I click it seems to work. Would there be a DOM element that doesn’t get picked up on the height calculation before it sends it to the host site?

Update:

This only happens on chrome.

Also if I add this after like .2 seconds on the host site it seems to fix it:

iFrameResizer.resize();

Don't really like this approach though.

1 Answers

Issues like these are always related to CSS, try the different height calculation methods and if that doesn’t work you will need to workout the CSS issue

Related