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.