PDA

View Full Version : [REFLOW] IFrames, Flash, Movies, Audio



hendricd
4 Apr 2008, 4:45 AM
You all may have noticed a few threads here on the forums specifically about Firefox and "movies/audio restarting, iframes refreshing, etc" when switching tabs, etc.

I'd thought I'd share with you why this happens on FireFox (and not other Browsers).

FF has a long-standing issue with all embedded object tags (IFRAME, OBJECT, EMBED). Anytime their size (often left and top as well) changes (or that of their parent elements), FF reinitializes those objects during reflow, thus the problem.

Exts' layout engine (Panels) relies on display:none/block on one internal element (bwrap) for seamless reflow of child Containers within a layout.

That means any child Ext.Panel, Ext.Component, body, or content which contains one of the markup objects mentioned above (like ManagedIframe, mediapanel, SWFObject (careful here Jack with 2.1+), etc) will be re-initialized as soon as an up-stream bwrap elements' style:display is toggled with display:none/block.

The best you can do currently to work around the problem in Ext layouts is ensure that no upstream parent in a layout uses display:none/block to control visibility. That's the tricky part. You'll have some luck with tabPanels because of their card layout design (can be controlled with visibility:visible/hidden) but not as a deeply-nested child panel.

My current recommendation, would be to only use OBJECT,EMBED,IFRAMES in top level, stand-alone Panels or flat layouts/pages where style:visibility can be controlled.

I've put together a test case demonstrating the problem for Bugzilla, but I fear its too late for Mozilla to fix this in time for FF3 (exists in all releases 1-3.b5).

ux.MediaPanel has some trickery built in to try to control Visibility on your behalf, and the upcoming release of the ux.Media series addresses that further, but:

This FF bug severely hampers practical cross-browser media applications for all RIA frameworks like (and less than) Extjs.

:(

esoteric
9 Apr 2008, 10:58 AM
I originally discovered this bug last August and starting trying to determine the problem after much discussion with the Firefox development team the problem was somewhat determined and I have been tracking the ticket for this since then. (dozen's of tickets have been opened regarding this, but this is the main bugzilla ticket that they all get merged into).

https://bugzilla.mozilla.org/show_bug.cgi?id=90268

hendricd
9 Apr 2008, 1:07 PM
One thing I've noticed (while working on the new version of ux.Media) is all browsers do that except IE!

I have come up with a fix for it for the new ux.Media Components but, anyone hoping to do charting with Flash with frameworks like Ext (without a new visibility approach for object,embeds, iframes) is going to be really annoyed.

supper008
15 Apr 2008, 7:09 PM
good boy!

stever
16 Apr 2008, 8:22 PM
That means any child Ext.Panel, Ext.Component, body, or content which contains one of the markup objects mentioned above (like ManagedIframe, mediapanel, SWFObject (careful here Jack with 2.1+), etc) will be re-initialized as soon as an up-stream bwrap elements' style:display is toggled with display:none/block.

:(

Yes, this is why HtmlEditor has problems being in a TabPanel sometimes (usually depending on deferred rendering). On rendering, it starts to go into design mode then its parent is hidden and it errors out (since going into design mode is asynchronous, it starts, then FF re-initializes it).

At one point in time I suggested going up the ownerCt chain and add listeners to see when it might get unhidden, but the better solution was to set a timer and just keep trying until it didn't fail.

As for the flash restarting, you can put in an option for your flash panel to go up the ownerCt chain and change the default hiding method.

Another thing you will notice at some point, is when you have flash in a floating panel over a non-floating flash panel. FusionCharts shows this bug pretty well. Again, not in IE. If a parent is floating I push the flash inside an iframe. I have to look up the ownerCt chain to know if it is floating which is pretty easy.

I have lots of workarounds for stuff and I forget to post them, I know it can save other people some time, and I'll try and get better at that...

rballman
25 Oct 2008, 4:15 PM
any solutions for this problem? I use the tabs and have an iframe for each tab with a flash page inside the iframe.

koko2589
7 Jun 2009, 9:58 PM
i show you how i put flash in desktop. do it to put on panel/Window
its work all Browsers
swf:
http://www.edulink.co.il/images/Calculator.swf



new Plugin.CalcWindow(),


Ext.ux.FlashPlugin = function() {
this.init = function(ct) {
ct.flashTemplate = new Ext.XTemplate(
'<div>',
'<object id="flash-{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="{swfWidth}" height="{swfHeight}">',
'<param name="movie" value="{swf}" />',
'<param name="quality" value="high" />',
'<param name="wmode" value="transparent" />',
'<param name="flashvars" value="{computedflashvars}" />',
'<param name="allowScriptAccess" value="domain" />',
'<param name="align" value="t" />',
'<param name="salign" value="TL" />',
'<param name="swliveconnect" value="true" />',
'<param name="scale" value="noscale" />',
'<embed name="flash-{id}" src="{swf}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="{computedflashvars}" type="application/x-shockwave-flash" width="{swfWidth}" height="{swfHeight}" wmode="transparent" allowScriptAccess="always" swliveconnect="true" align="t" salign="TL" scale="noscale"></embed>',
'</object>',
'</div>'
);
ct.flashTemplate.compile();
ct.renderFlash = function() {
if (this.flashvars && (typeof this.flashvars == 'object')) {
var tempflashvars = Ext.apply({}, this.flashvars);
for (var key in tempflashvars) {
if (typeof tempflashvars[key] == 'function') {
tempflashvars[key] = tempflashvars[key].call(this, true);
}
};
this.computedflashvars = Ext.urlEncode(tempflashvars);
}
this.swfHeight = this.body.getSize().height -2;
this.swfWidth = this.body.getSize().width -2;
if (this.body.first()) this.flashTemplate.overwrite(this.body.first(),this);
else this.flashTemplate.insertFirst(this.body,this);
};
ct.loadFlash = function(config) {
Ext.apply(this,config);
this.renderFlash();
};
ct.on('afterlayout',ct.renderFlash, ct);
};
};

//--------------------------------------------------------------------------------------------------------------------------
/* *******************************************************************************
* Use Plugin Namespace
*/

var Plugin = Plugin ||
{};
Plugin.CalcWindow = Ext.extend(Ext.app.Module, {
id : 'calc-win',

init : function(){
this.launcher = {
text: 'מחשבון ',
iconCls:'kcalc_16',tooltip: '<b>מחשבון</b><br />מחשבון שימושי',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('calc-win');
if(!win){
var winWidth = desktop.getWinWidth() / 1.1;
var winHeight = desktop.getWinHeight() / 1.1;

win = desktop.createWindow({
id: 'calc-win',
title:' מחשבון ',
iconCls: 'kcalc_16',

shim:false,
animCollapse:false,

constrainHeader:true,
layout:'fit',
width: 405,
height:460,
border: false,

// constrain: true,
closeAction:'close',
// plain: true,
modal : false,
resizable: false,
maximizable:false,
items:[{
layoutConfig:{
border: false
},items:[{
header: false,
layout: 'fit',
border: false,
width: 400,
height: 430,
swf: 'http://www.edulink.co.il/images/Calculator.swf',flashvars: {dataUrl: 'accountPerformance.xml', chartHeight: function(){ return this.body.getSize().height -0; }, chartWidth: function(){ return this.body.getSize().width -0;}},
plugins: new Ext.ux.FlashPlugin()
},{
}]
},{
}]
});
}
win.show();
return win;
}
});
//--------------------------------------------------------------------------------------------------------------------------
:-?

hendricd
6 Nov 2009, 4:15 AM
There have been many Forum posts over the last two years concerning this issue. So, I've updated the first post of the thread with the ux.VisibilityMode plugin (already included, enabled, and applied in the ux.Media/Flash series, ux.Media.Chartpacks, and ux.ManagedIFrame extensions).

For those seeking relief, simply include the plugin souce in your project and add the plugin to an appropriate Container position in your layout (whatever that might be).

Generally, all you need do is something like this: (typical tabPanel example shown here)



var V = new Ext.ux.plugin.VisibilityMode({ elements:['bwrap']}) ;
new Ext.TabPanel({
plugins : V,
defaults :{ plugins: V },
items :[....]
});


and the fixes will 'bubble up' your Layout heirarchy to solve most upstream reflow issues as well.

Note:
Because of the intensive position:absolute->relative transitions used in the Portal/Portlets Components, little can be done with a plugin to fix the problem. Until the Portal becomes a true absolute layout, your <OBJECT>, <IFRAME> content WILL continue to reload/break. (For any Flash charting and other objects, that usually means re-rendering the Flash object again after a portlet is moved.)

Good Luck ;)

reza-rfr
2 Jan 2012, 7:29 AM
nice

bubby248
4 Mar 2012, 9:02 PM
Iframes refreshing on Tab change in firefox.

I had a flex application in which i am loading html urls as iframes under each tab using flex iframe third party component.Its working fine in IE and chrome.But in FF, these iframes are refreshing on each tab change.How can I get rid of this iframe refresh.I tried to call your uxvismode.js from html but no luck.
Hopefully waiting for the reply.


Thanks
Bubby