Iframe-resizer: resizedCallback is called too early

[romanovma]

Hi, for some reason my iFrame is resized 2 times during the page load and second time it is resized with message different from init and in the code I can see that in this case resizing happens inside requestAnimationFrame(say I use Chrome) which is basically async. But the callback is called synchronously.

...
default:
    resizeIFrame();
    callback('resizedCallback',messageData);
}

function resizeIFrame(){
    function resize(){
        setSize(messageData);
        setPagePosition(iframeId);
    }

    ensureInRange('Height');
    ensureInRange('Width');

    syncResize(resize,messageData,'init');
}

function syncResize(func,messageData,doNotSync){
    /* istanbul ignore if */  //Not testable in PhantomJS
    if(doNotSync!==messageData.type && requestAnimationFrame){
        log(messageData.id,'Requesting animation frame');
        requestAnimationFrame(func);
    } else {
        func();
    }
}

Finally I wrap my callback function into requestAnimationFrame which works as expected but that should be mentioned in docs if not changes in the source code. I would like to help with the fix but have no idea why you put requestAnimationFrame here. Thanks.

[davidjbradshaw]

It's was used to reduce screen flicker in some older browsers. This was mainly to do with the 'max' resize method that requires the height of the iFrame to be set to zero before you can work out it's new size. Ideally you want to have this all happen in one animation frame.

The thing is that we now have a few newer ways to work out the height, that don't have this problem, so I expect the best solution is to disable it with these newer methods.

[dshiryaev-plesk]

We encountered this bug, too, in Chrome and Opera. Firefox works as expected. The system in which we are integrated via iframe requires its own callback function call after each change in the height of our iframe. So the callback does not work because in the moment of it's call the iframe is not resized yet.

[dana321]

I had the same issue with iframeresizer where the page loaded too quickly and triggered the javascript before it was ready after switching to a cdn for faster loading times.

The fix was to wrap the call on the onload with the javascript setTimeout function to delay loading by one second (setTimeout(iframeresizer({}),1000); (add the params you need).. You can also set the width and height using the style tag to set the width/height larger than the space you need then it should show correctly after a second.. i don't notice the difference.

[codener]

I am experiencing the same issue as @dshiryaev-plesk. I believe the resized callback should only be called once the resize is done:

function resizeIFrame(){
    function resize(){
        setSize(messageData);
        setPagePosition(iframeId);
        callback('resizedCallback',messageData);
    }
...

Calling back _inside_ the resizeIFrame function even looks a bit cleaner to me.

Would you accept this change?

[davidjbradshaw]

@codener That seems like the simplest way of fixing this for now. Happy for a PR.

[codener]

Would you just need the callback line to be moved, or tests too, or anything else? Because I'm not acquainted with your test suite and I would not easily know how to test that behavior.

[davidjbradshaw]

Does it break any of the tests?

[codener]

I don't expect them to, but I haven't run them, I must admit. Unfortunately, I am only able to make an untested pull request, because I have never worked with Grunt and Karma etc.
I'd be happy to supply one.

[davidjbradshaw]

Send the PR and I'll take a look.

If you have node installed, you can run the tests as follows from the project folder.

npm install
grunt test