arielsommeria.com/blog/

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

This entry was posted on Wednesday, April 22nd, 2009 at 8:45 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.