เอี้ยก้วย ณ แอนฟิลด์

It’s a bug in Firefox that when you hide and then show SWF (Flex or Flash) again, it will be reloaded.

So, this is workaround.

Firstly, do not use “display: none” CSS to hide the div that contains Flash. Use “visibility: hidden ” instead.

What about layout? Yes, it may be a problem due to “visibility: hidden” just hide the div but still reserve space for it.

Therefore, we will fix it by additional CSS which is “width: 0px; height: 0px;”.

There is one side effect, the browser scroll bar will be longer than content  (I’m not sure why, but you may fix it by JavaScript. It’s out of my scope, so please let me know if any).

Conclusion, in case of we have to show/hide SWF and serious about reloading, we will use “visibility: hidden; width: 0px; height: 0px;” instead of “display: none”

In my case, I use jQuery Tabs.  So, I will fix CSS class from

.ui-tabs .ui-tabs-hide { display: none !important; }

to be

.ui-tabs .ui-tabs-hide { visibility: hidden; width: 0px; height: 0px; }

References:
http://pipwerks.com/lab/swfobject/hide-swf/2.0/index.html
http://stackoverflow.com/questions/298342/firefox-restarts-flash-movie-if-enclosing-div-properties-change

Thanks @tvchampion and @dogdoy for help.

Related posts:

1. CSS Properties: Display vs. Visibility
2. การ Embedding assets (Images, SWF, MP3, Font) ใน Flex Application
3. Finally, Flash will be Dreamweaver for HTML5 Canvas.
4. Adobe Flash samples
5. Firefox 3 Download Day certificate

Tags: CSS, Flash, Flex, jQuery

This entry was posted on Thursday, October 8th, 2009 at 1:16 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.