Issue with iframe inside a div with display:none in Chrome 65

[aleen42]

Recently, Chrome has release version 65, and it seems to be confusing when using iframe-resizer. The problem is that when I wrap an iframe with a div element, it will be set with a small height when the div element is set to be hidden with display: none;, and in some machines, resizedCallback of iframe-resizer is not called when the div element is set with display: block; again. It seems that Chrome 65 has changed some rendering way resulting in this problem, and I hope to open this issue to help authors of iframe-resizer to research the problem and even to report a bug for Chrome.

[aleen42]

It seems that in Chrome 65, using lowestElement for calcuating height is too slow in some machines, resulting in mising calling of resizedCallback, and I use taggedElement to workaround this temporarily.

[davidjbradshaw]

Have you tried using visibility: hidden instead?

Would be great if you could open a bug with Chrome for this

[aleen42]

I try it later, but I don't understand why lowestElement option does not work under Chrome 65?

[aniude]

see the PR: #568

[davidjbradshaw]

Thanks will try and find sometime over the weekend to push an updated release

[elalemanyo]

Hi,
I am having the same error using Chrome 69. When I set div to display:block again the height is not the right one. Using lowestElement or taggedElement is not helping. With max the bug is gone but the height is too much...
Any idea?

Thanks!

[davidjbradshaw]

Have you tried using visibility: hidden rather than display: none?

If all else fails you can force the iFrame to resize from the parent page.
https://github.com/davidjbradshaw/iframe-resizer#resize

[elalemanyo]

I am showing the iframe inside one tab, the problem is happening when I switch to the other tab and after that I come back to the tab where the iframe is showing up, than the height from the iFrame is just 20px. I am not sure if I can easily use visibility: hidden instead of display: none, because visibility: hidden is still taking up space on the page and that would break the tab functionality.
Also I am not sure how I can access the iFrameResizer object to force the resize from the tabs script.

[davidjbradshaw]

document.getElementById('myIframe').iframeResizer.resize()

[elalemanyo]

Thanks for your tips. At the end I force iFrame resize and looks good now.