Iframe-resizer: iFrame containing Angular app won't resize smaller

[mcodev1]

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).

[davidjbradshaw]

Most likely a CSS issue, see troubleshooting section of docs.

[mcodev1]

I'll take a closer look at the docs then and get back to you early next week. Thanks for responding quickly.

[mcodev1]

Would you consider adding the additional logging or would you accept a pull request to that effect?

[davidjbradshaw]

The resize method is logged when set or changed, look further back in the log.

[mcodev1]

No I'm referring to the actual calculated values of the height and width that iframe-resizer uses to determine if the page changed in size.

[iFrameSizer][pwProgramsAndMajorsAppFrame] Trigger event: Mouse Down iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] No change in size detected iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] Trigger event: Mouse Up iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] No change in size detected iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] Trigger event: mutationObserver: [object HTMLDivElement] childList iframeResizer.contentWindow.js:140
[iFrameSizer][pwProgramsAndMajorsAppFrame] No change in size detected iframeResizer.contentWindow.js:140

It doesn't log that information.

[mcodev1]

Here is a Plunker that demonstrates the issue. This has no custom CSS.

https://plnkr.co/edit/0VxXHEi8u88gw2wDebjY?p=preview

[mcodev1]

@davidjbradshaw It seems that adding

<!DOCTYPE html>

to the top of the iframe's content was enough to get the iframe to downsize, but it would cut off the bottom few pixels, and changing the heightCalculationMethod to "max" cleared that up. Strange!

[geoffw8]

+1 worked for me too. How strange!

This folks is why if you solve your problem you should update your tickets!

Thx

[oliveiracdz]

Remove height: 100%; from CSS of body tag solves to me.