While working on IFrame integration for pearltrees I came across a pretty unfathomable bug that I haven’t seen documented elsewhere, so I thought I’d post about it here. Zooming in Firefox messes up IFrame positioning. Furthermore, Firefox remembers zooming for each individual page, so if perchance you zoomed in the application by accident, things will be permanently messed for that url. What it looked like at the offset was that on one computer only the Iframe would spill out of its bounds. Changing the name of the html file would somehow solve the problem. Once I’d identified the problem, here’s how I solved it. The fix only works if the host Flash application uses “noscale”, and would need to be slightly adapted if the application didn’t take the whole window. The main IFrame management code is inspired from this.
The first step is to detect zooming. I drew inspiration from this post to write the following:
In the loading file I added a simple function to get the browser width:
function getInnerWidth(){
return innerWidth;
}
Using this function and the stage width I can deduce the zoom factor and apply it to my IFrame to size and position it :
/**
* Adjust frame position to match the exposed area in the application.
*
*/
public function moveIFrame(): void{
var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
var innerWidth:Number = ExternalInterface.call(“getInnerWidth”);
var browserScaling:Number = 1;
if(innerWidth > 0){
browserScaling = innerWidth / Application.application.width;
}
ExternalInterface.call(“moveIFrame”, frameId, iframeId, globalPt.x * browserScaling, globalPt.y * browserScaling, this.width * browserScaling, this.height * browserScaling);
}
Finally, when should this resizing occur? On loading, obviously, but also when the user resizes during the session. So in the Iframe constructor I added the following callback that can be called from Javascript:
ExternalInterface.addCallback(“refreshIFrame”, moveIFrame);
Then I added the following event listener on the body element of the HTML container:
onresize=”document.getElementById(‘Main’).refreshIFrame()”
Voilà! On the fly adaptation to a user zoom when using an Iframe in Flex. Added points would be for re-dimensioning the Iframe during the mouse scroll, but at least for now this is more than enough for my purposes.
Update: Of course, talk is nice, a working example is appreciated. Here we go
by lexa
22 Apr 2009 at 15:17
Hi
this is interesting
have you an online example so I can figure out how efficient it is?
by lexa
22 Apr 2009 at 15:17
and how precise
by admin
22 Apr 2009 at 16:31
Here you go!
http://arielsommeria.com/blog/content/iframe-zoom/FirefoxZoomTest.html
Ariel
by lexa
22 Apr 2009 at 20:34
it works great!
perfect in fact
i would suggest you also provide a sample without your solution so that people can see the bug
but anyway i experienced it. and by the way i do have an example : on http://flashcms.fr/flash-website/dynamic-flash/agenda.evenements/agenda.google if you change firefox zoom, it happens
thanks for this solution
lex.
Pingback
by Rounding Up An Activity-filled Week
27 Apr 2009 at 17:06
[…] came across a unique Firefox issue – the zoom feature messes up the iframes with Flex – and discovered a fix. I hope you’ve read his interview about Pearltrees on Flex […]
by Nash
17 Sep 2009 at 05:54
It seems iFrame messup in IE-8 too when zoom feature is used. i observed this in the link lexa provided above.
One more interesting issue observed, when zoom reverted back to initial 100% frame doesn’t come back to original until user toggle to some other screen and back to first screen.
by admin
17 Sep 2009 at 10:34
Hi Nash,
yes, IFrames are definitively a hack. I hope browsers and plugin developers figure this out, becuase there is definitively a demand for this.
bye
Ariel
by Julien N
20 Oct 2009 at 17:03
Hi Ariel, nice solution !
I integrated it in the Flex-IFrame project (http://code.google.com/p/flex-iframe/ ). I made little modifications to avoid recalculating the zoom ratio too often, and to make it work on IE, FF, Chrome, Safari and Opera.
Thanks for your fix !
Cheers
by admin
04 Nov 2009 at 19:48
Hi Julien,
I’m glad it can be of use!
bye
Ariel
by Tobias
26 Nov 2009 at 19:31
Hey! This seems like the solution to my problems, I’ve made a dynamic xml slideshow in Flash CS3 that get messed up as you zoom.
The thing is: I have no idea what Flex is nor have I ever used it so my question is wether you can (and how you do to) use it in just a normal Flash (.fla) file?
Thank you, seems great eighter way
by admin
26 Nov 2009 at 19:56
Hi,
the fix is not at all Flex specific, you should be able to apply this to a flash project without any problems.
bye
Ariel
by Lance
03 May 2010 at 01:39
Thanks! You literally saved my ass on this one…. Long story, but I thought app settings saved to the db were causing this- this post save me hours of debugging at a critical stage of the dev cycle.
Cheers
by admin
03 May 2010 at 09:19
glad I could help. It took me ages to get that one
by Eve Reid
04 Oct 2010 at 08:02
IE8 seems to be very stable compared to earlier versions of internet explorer”:;
by Hand Winch
19 Oct 2010 at 06:35
the best thing about IE8 is that it is quite stable than previous releases of Internet Explorer~`,
by Chris
10 Jun 2011 at 19:05
Hi guys,
this is a really cool library to get around all limitation that flex has regarding rendering html content.
There is one thing that will screw up the positioning of the iframe when your flex app is not a fullscreen one and has a fixed size.
In line 567 of the class IFrame there is the following code where the scale factor is calculated.:
_browserScaling=browserMeasuredWidth / Application.application.width;
The better approach would be to use the stage object instead like this:
_browserScaling=browserMeasuredWidth / Application.application.stage.stageWidth;
Best regards
Chris
by admin
13 Jun 2011 at 12:10
thanks!
by Samreen
15 Nov 2012 at 09:22
i am facing similar kind of problem using iframe in flex 4.5. my iframe is becoming very small when opened on mozilla browser,its appearing on the left corner of the window,its working fine on ie and chrome.i am using google docs viewer inside iframe to preview word,ppt,pdf and excel .i am using flex-iframe-1.5.1 libraray.kindly solve my problem i am completely new to flex. kindly help me with code i need to add so that it works fine
by admin
15 Nov 2012 at 17:09
well, the code is in the post, so try it out. Other than that, try resetting the zoom in firefox and it should work well enough