Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iFrame containing Angular app won't resize smaller

See original GitHub issue

The problem

I’m struggling with getting the iframe to resize smaller when the iframe’s content shrinks. It will resize larger just fine but will then stay at the larger size no matter what happens to the content of the iframe.

If the "log": true option would log which heightCalculationMethod is being used and what the calculated values are once it’s done retrieving them it may help in debugging this issue. As it is, it simply reports:

[iFrameSizer][pwProgramsAndMajorsAppFrame] Trigger event: parentIFrame.size() iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] No change in size detected iframeResizer.contentWindow.js:140

My implementation

My iFrame contains an Angular app. I’ve added a manual resize within the Angular controller in a watch:

$scope.$watch(function() {
    if(!parentIFrame) {
        return;
    }

    setTimeout(function() {
        parentIFrame.size();
    }, 0);
});

The $watch function in Angular will trigger on each digest cycle; the relevance here is that it also triggers after anything that may change the page appearance or size. I added this as the autoResize was also not correctly detecting that the iFrame’s content had gotten smaller.

I’ve tried this with every available heightCalculationMethod including "lowestElement" which claims:

[iFrameSizer][pwProgramsAndMajorsAppFrame] Trigger event: parentIFrame.size() iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] Parsed 132 HTML elements iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] Element position calculated in 1ms iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] No change in size detected iframeResizer.contentWindow.js:140

My iframe:

<iframe id="pwProgramsAndMajorsAppFrame" style="width: 100%;" src="myWebsite.example"></iframe>

Browser: This occurs in all of:

Chrome 50.0.2661.75 (64-bit)
Firefox 43.0.1
Safari 9.1

iframe-resizer: Version 3.5.3

Angular: Version 1.4.8

~~Unfortunately I’m unable to provide a link to my test page as the content is under NDA, but if an example is needed I may be able to isolate the issue in a generic example.~~ Edit: A example Plunker that demonstrates the issue: https://plnkr.co/edit/0VxXHEi8u88gw2wDebjY?p=preview

Something I’ve noticed that may help is that the html and body elements of my iframe’s content page have their height set to "auto" by default and will take on the height of the iframe that iframe-resizer sets, though the top-level element within the body is the one that is changing size. By using the Chrome inspector and removing the height attribute on the iframe itself, it will resize up to the appropriate size on the next resize if the content is larger (but never smaller).