[REFLOW] IFrames, Flash, Movies, Audio
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.
Tags for this Thread