iFrame loads with too much height, then readjusts with mouse click or hover

[bmounteer]

When my iframe loads it looks like this:

With this log code:

After you hover your mouse over the iframe or click in the area of the iframe, then it sizes it correctly:

With this log code:

How do you get it to detect the correct iframe size when the page loads?

[davidjbradshaw]

Can you please try the latest dev branch build.

[davidjbradshaw]

Did this fix it for you?

[bmounteer]

Thanks for the feedback David. No, the issue is still occurring. We were able to hack it by calling this function when the modal is opened:

_forceIframeResize: function () {
        var iframe = this._element.find('.iframe-resizer').get(0);

        // brute force
        var prevHeight = $(iframe).height();
        var interval = setInterval(function () {
          // if height has changed, call it good
          var nextHeight = $(iframe).height();
          if (nextHeight !== prevHeight) {
            clearInterval(interval);
            return;
          }

          iframe.iFrameResizer.resize();
        }, 10);

        // give up after a second
        setTimeout(function () {
          clearInterval(interval);
        }, 1000);
      }

[davidjbradshaw]

Would you be able to make a simple test case for me to look at.

Also what browsers/platforms is this an issue in?

[bmounteer]

You can see it happening on this page: https://www.lendio.com/bp/signup

All tests were done on OS X El Capitan. Chrome and safari has the height issue we are talking about. Firefox occasionally will not even show the iframe. If you go that page and it looks normal, just refresh it a few times and you'll see it.

[davidjbradshaw]

Any idea how many times that function of yours gets called?

Also I'd suggest changing the setTimeout from 10 to 16 as their is no point checking more than once every screen refresh.

[davidjbradshaw]

Just looking at your page and it has v3.0.0 on it, current is v3.5.0. Can you please download the version on the dev branch and try that.

https://github.com/davidjbradshaw/iframe-resizer/blob/dev/js/iframeResizer.contentWindow.js

[bmounteer]

It appears that my function is only being called once to resize the iframe.

I have updated the script to the current version. The bug is still occurring without my timeout in place. It's strange because I use the iframe resizer for this widget in a few other locations on the site and I don't have this issue. I think that its must be a timing issue with the javascript being loaded in certain instances. Once we deploy this live with our timeout hack in place, I can create an example page for you using the same page I took a screenshot of without the hack if you'd like to look at it. That should happen today.

[davidjbradshaw]

I’d like to know if the unreleased version in the dev branch fixes this for
you. I added a timeout into the main code to push the init size check to
the bottom of the JS event loop, to prevent any race condition with the
browser render. Which I think is the most likely cause of your issue.

[bmounteer]

I put the unreleased version in our site and added a comment to distinguish its loading the new code. In these two screenshots you can see it didn't fix the issue.

[davidjbradshaw]

I'm at a bit of a loss. If you can build a simple test case then I'd like to take a look.

[jehoshua02]

FWIW: On http://lendio.com/bp/signup, I use an interval like this:

    $(function () {
      var $element = $('#widget-iframe');

      $element.iFrameResize({
        log: true
      });

      var interval = setInterval(function () {
        console.log('FORCE RESIZE');
        $element.get(0).iFrameResizer.resize();
      }, 100);

      setTimeout(function () {
        clearInterval(interval);
      }, 1000);
    });

It works for us (obviously in a less than optimal way). But I noticed something interesting and possibly relevant:

You'll notice that at one point it sets the iframe height to 509. Then it sets it again to 124.

And when I don't use the interval, you can see that the iframe height is being set to 509 but that's it. It never sets the height again until there is some event in the iframe page (hover, focus, mouse, etc):

My Hunch: There is something in our iframe that is loading late, after iframe-resizer does it's thing, like some styles or scripts, that affect the total height of the document in some way but without triggering an event that iframe-resizer is listening or can listen to.

I think the next step, for me at least, is to prove or disprove my hunch by tinkering with a simplified example.

[davidjbradshaw]

You hunch sounds worth investigating. Although their are very few things that can cause CSS to change with out triggering mutationObserver. Do you late load a CSS file?

[davidjbradshaw]

Just had an idea. I think adding readystatechange to the list of watched events should fix this.

https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange

[davidjbradshaw]

Can you please give the dev branch another go. I'm hopeful this will fix it.