iFrame-Resizer with Raphael.js about iframe-resizer HOT 31 CLOSED

What's the log output from iFrame-resizer look like?

from iframe-resizer.

The error displayed above fires before the log shows anything, the log will display this in the console after.

[iFrameSizer][Host page] IFrame scrolling disabled for DashboardPanel
iframeResizer.js:63

[iFrameSizer][Host page][init] Sending init msg to iframe (DashboardPanel:8:false:true:32:true:true:0 0 150px:offset:null:null)
iframeResizer.js:63

[iFrameSizer][Host page] IFrame scrolling disabled for DashboardPanel
iframeResizer.js:63

[iFrameSizer][Host page][init] Sending init msg to iframe (DashboardPanel:8:false:true:32:true:true:0 0 150px:offset:null:null)

from iframe-resizer.

Hmm, then I expect the issue is with the other lib I'm afraid.

from iframe-resizer.

Okay, thanks for your input.

from iframe-resizer.

On last point, I find it odd that the log message gets repeated like that, are you calling it twice?

from iframe-resizer.

There is a chance that it is initially called twice.

Reason being i'm using this in an ASP.net project. The Resize code stops working after an update panel does a postback therefore a Rebind function is fired on load of each postback. Therefore theres a chance that the Rebind function and initialise function are both firing.

EDIT: That was the case, it fired in both Initialise and Rebind. I've fixed this however the issue still persists.

from iframe-resizer.

In Raphael.js we found this line of code:

jc = a.requestAnimationFrame || a.webkitRequestAnimationFrame || a.mozRequestAnimationFrame || a.oRequestAnimationFrame || a.msRequestAnimationFrame || function (a) { setTimeout(a, 16) }

when we chop it down to this: jc = function (a) { setTimeout(a, 16) } it seems to fix it

from iframe-resizer.

Oh I understand the issue now. I think if you load Raphael.js first it might fix this, as you don't really want to make that change if you don't have to.

I'll make my code play nicer when I get some time next week.

from iframe-resizer.

PS this might be of interest to you.

https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame

from iframe-resizer.

I give this a try and let you know the result.

from iframe-resizer.

Should be fixed now, try v2.4.7 and let me know if it works.

from iframe-resizer.

I've just updated however on IE 9 the iFrame seems to continually resize.

from iframe-resizer.

Can you send me a link I can look at please.

from iframe-resizer.

Unfortunately the project has not yet been deployed to a server and is running locally.

I've tested on other browsers now. Chrome, Opera, Firefox etc don't seem to resize correctly.

The height is accumulating and not resizing down.

Log:
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (DashboardPanel:8:false:true:32:true:true:0 0 150px:offset:null:null) iframeResizer.js:64
[iFrameSizer][DashboardPanel] Body margin set to "0 0 150px" iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] HTML & body height set to "auto" iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Enable public methods iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Enable MutationObserver iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock on iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Sending message to host page (DashboardPanel:150:854:init) iframeResizer.contentWindow.js:57
[iFrameSizer][Host page] Received: [iFrameSizer]DashboardPanel:150:854:init iframeResizer.js:64
[iFrameSizer][Host page] Checking conection is from: https://localhost:44300 iframeResizer.js:64
[iFrameSizer][Host page] Requesting animation frame iframeResizer.js:64
[iFrameSizer][Host page] IFrame (DashboardPanel) height set to 150px iframeResizer.js:64
[iFrameSizer][DashboardPanel] Trigger event cancelled: resize iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock off iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] --

from iframe-resizer.

Can you create a simple test case to send me then.

Do you only see this issue in the latest version?

Do you have an issue when you look at the examples?

Have you tried changing the height calculation method?

Most likely issue is you have some CSS that is set to make the page bigger than it's current size and this creating a loop.

from iframe-resizer.

PS That log just shows the initial sizing of the iFrame. What gets logged next?

from iframe-resizer.

Yes this has only started happening in the latest version.

Your examples work fine, therefore it must be something to do with my project.

Haven't tried changing the height calculation method will try that now.

The log below is what happens in Chrome when I interact with the iFrame. In my case hovering over an element:

[iFrameSizer][DashboardPanel] Trigger event: mutationObserver: [object SVGTextElement] attributes iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock on iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Sending message to host page (DashboardPanel:12300:854:mutationObserver) iframeResizer.contentWindow.js:57
[iFrameSizer][Host page] Received: [iFrameSizer]DashboardPanel:12300:854:mutationObserver iframeResizer.js:64
[iFrameSizer][Host page] Checking conection is from: https://localhost:44300 iframeResizer.js:64
[iFrameSizer][Host page] Requesting animation frame iframeResizer.js:64
[iFrameSizer][DashboardPanel] Trigger event: mutationObserver: [object SVGTextElement] attributes iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] No change in size detected iframeResizer.contentWindow.js:57
[iFrameSizer][Host page] IFrame (DashboardPanel) height set to 12300px iframeResizer.js:64
[iFrameSizer][DashboardPanel] Trigger event cancelled: resize iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock off iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] -- iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event: mutationObserver: [object SVGTextElement] attributes iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock on iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Sending message to host page (DashboardPanel:12450:854:mutationObserver) iframeResizer.contentWindow.js:57
[iFrameSizer][Host page] Received: [iFrameSizer]DashboardPanel:12450:854:mutationObserver iframeResizer.js:64
[iFrameSizer][Host page] Checking conection is from: https://localhost:44300 iframeResizer.js:64
[iFrameSizer][Host page] Requesting animation frame iframeResizer.js:64
[iFrameSizer][Host page] IFrame (DashboardPanel) height set to 12450px iframeResizer.js:64
[iFrameSizer][DashboardPanel] Trigger event: mutationObserver: [object SVGTextElement] attributes iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Sending message to host page (DashboardPanel:12600:854:mutationObserver) iframeResizer.contentWindow.js:57
[iFrameSizer][Host page] Received: [iFrameSizer]DashboardPanel:12600:854:mutationObserver iframeResizer.js:64
[iFrameSizer][Host page] Checking conection is from: https://localhost:44300 iframeResizer.js:64
[iFrameSizer][Host page] Requesting animation frame iframeResizer.js:64
[iFrameSizer][Host page] IFrame (DashboardPanel) height set to 12600px iframeResizer.js:64
[iFrameSizer][DashboardPanel] Trigger event cancelled: resize iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event cancelled: resize iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock off iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] -- iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event: mutationObserver: [object SVGTextElement] attributes iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock on iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Sending message to host page (DashboardPanel:12750:854:mutationObserver) iframeResizer.contentWindow.js:57
[iFrameSizer][Host page] Received: [iFrameSizer]DashboardPanel:12750:854:mutationObserver iframeResizer.js:64
[iFrameSizer][Host page] Checking conection is from: https://localhost:44300 iframeResizer.js:64
[iFrameSizer][Host page] Requesting animation frame iframeResizer.js:64
[iFrameSizer][Host page] IFrame (DashboardPanel) height set to 12750px iframeResizer.js:64
[iFrameSizer][DashboardPanel] Trigger event cancelled: resize iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] Trigger event lock off iframeResizer.contentWindow.js:57
[iFrameSizer][DashboardPanel] --

In IE this code seems to just keep looping.

from iframe-resizer.

iFrame loads to correct height when i use heightCalculationMethod: 'bodyScroll'.

However as mentioned above the iFrame height will accumulate on interaction with elements.

Also as Raphael.js animates the iFrame resize code fires continuously until it stops.

EDIT:: I've made a local example however have no yet been able to reproduce the issue.

from iframe-resizer.

I have put together an example. Where would you like me to send it?

EDIT:: Can be found here: https://www.dropbox.com/s/rwjr08mrct3iz7x/iFrameWithRaphael.zip

from iframe-resizer.

Will take a look on Monday.

from iframe-resizer.

I've just tested this in IE9, FF29 and Chrome34 and can not reproduce the problem in any of these browsers.

Doing animation through DOM manipulation, rather than CSS manipulation however puts a huge load on the CPU in browsers that support mutationObserver, as the iFrame height has to be recalculated for every animation step.

from iframe-resizer.

You also have the option disable automatic resizing and then call parentIFrame.size() when you want to update the size of the iFrame.

from iframe-resizer.

Here's another example this time is uses animation with hover: https://www.dropbox.com/s/zxai7tifdri8d2d/iFrameWithRaphael-2.zip

Unfortunately resizing the iFrame manually isn't an option for us at this point as there is a lot of DOM manipulation. There is also a lot of SVG usage with animation.

from iframe-resizer.

The second example works if you use relative, rather than absolute positioning for the pie chart.

Given the high mutation count, you need to avoid the bodyScroll, documentElementScroll and max height calculation methods. As these require for the page to be resized twice to workout the correct height. This is why you get the flickering.

from iframe-resizer.

Not sure what more I can add to this, so closing it for now. However, if you can come up with another example please open another issue.

from iframe-resizer.

Just thinking about this a bit more. Would a tolerance option help you, so that a resize is only triggered if the content has change by more than Xpx?

from iframe-resizer.

I could see that working. My animations in Raphael don't altar the height of the iFrame so it could possibly work.

from iframe-resizer.

Have you tried setting the autoResize option to false? That way the frame is sized on load, but then does not change.

from iframe-resizer.

Yes but this will not work for my project as pages will either contain animating SVG which won't change the iFrame size or contain custom jQuery which will add new content. At this point it would be quite a job to add the manual resize to all the jQuery.

from iframe-resizer.

Are those pages in the same iFrame?

from iframe-resizer.

My project consists of one page (Master). The Master contains a single iFrame that dynamically loads new pages depending on the navigation item clicked. The pages that are loaded are made up of a variation of SVG, jQuery and straight HTML. (There is roughly 20 pages if not more made up like this.)

from iframe-resizer.