The use case is that are CSS-styled dropdowns near the bottom of the iframe that are cutoff unless the iframe height increases when a dropdown is expanded. As per the links below, I put the following snippet to resize the iframe in every input's onchange event*.
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
The iframe grows in size when a dropdown is expanded. However, when we select an item (also programmed to fire resizeIframe), the iframe does not shrink back down. The code works fine in IE10, out of all things!
Using a timeout works but gives a noticeable flicker:
// works but gives noticable flicker
function resizeIframe(obj){
obj.style.height = 0; //setting this to 'auto' also gives flicker
setTimeout(
() => {obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'},
0
);
}
I should also clarify that precalculating the maximum height is unnacceptable in this use case because it will just result in extra empty space.
* I can inject JS into the iframe but can't modify the iframe HTML. So while firing an event on input changes isn't ideal, it gets the job done and seems to be performant even on IE10 using less than ideal hardware.
