iFrame-Resizer with Raphael.js
SFPink opened this issue · comments
Hello,
I've been using your resizing code for a while now which works fantastic on modern browsers. I have been using it along side Raphael.js again no problems on newer browsers.
However on older browsers such as IE 8 <, Opera 12
I'm getting an error which is essentially breaking the Raphael.js. I'm not sure if anything can be done but I'll post up what I can and maybe you can shed some light on this subject.
I'm not familiar with window.requestAnimationFrame but was wondering if a conflict could occur with these libraries.
This is the error (This may or may not help):
Uncaught exception: RangeError: Maximum recursion depth exceededError thrown at line 10, column 30558 in (a, b) in https://localhost:44300/Scripts/Circles/raphael.js:
return b = M.call(b), "finite" == b ? !Yz : "array" == b ? a instanceof Array : "" == b && null === a || b == typeof a && null !== a || "object" == b && a === Object(a) || "array" == b && Array.isArray && Array.isArray(a) || W.call(a).slice(8, -1).toLowerCase() == b
called from line 21, column 6147 in (b, d) in https://localhost:44300/Scripts/Circles/raphael.js:
if (null == d && c.is(b, "string"))
called from line 14, column 35059 in () in https://localhost:44300/Scripts/Circles/raphael.js:
n.attr(o), function (a, c, d) { setTimeout(function () { b("raphael.anim.frame." + a, c, d) }) }(n.id, n, e.anim)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
called from line 14, column 35650 in () in https://localhost:44300/Scripts/Circles/raphael.js:
c.svg && n && n.paper && n.paper.safari(), ic.length && jc(kc)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
called from line 14, column 35650 in () in https://localhost:44300/Scripts/Circles/raphael.js:
c.svg && n && n.paper && n.paper.safari(), ic.length && jc(kc)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
called from line 14, column 35650 in () in https://localhost:44300/Scripts/Circles/raphael.js:
c.svg && n && n.paper && n.paper.safari(), ic.length && jc(kc)
called from line 56, column 4 in (callback) in https://localhost:44300/Scripts/src/iframeResizer.js:
callback();
What's the log output from iFrame-resizer look like?
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)
Hmm, then I expect the issue is with the other lib I'm afraid.
Okay, thanks for your input.
On last point, I find it odd that the log message gets repeated like that, are you calling it twice?
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.
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
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.
PS this might be of interest to you.
https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame
I give this a try and let you know the result.
Should be fixed now, try v2.4.7 and let me know if it works.
I've just updated however on IE 9 the iFrame seems to continually resize.
Can you send me a link I can look at please.
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] --
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.
PS That log just shows the initial sizing of the iFrame. What gets logged next?
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.
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.
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
Will take a look on Monday.
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.
You also have the option disable automatic resizing and then call parentIFrame.size() when you want to update the size of the iFrame.
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.
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.
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.
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?
I could see that working. My animations in Raphael don't altar the height of the iFrame so it could possibly work.
Have you tried setting the autoResize option to false? That way the frame is sized on load, but then does not change.
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.
Are those pages in the same iFrame?
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.)