Chrome, Firefox reset Flash plugin if display: property changes (Update)

To resolve the mystery of Flash plugins restarting when their display property changes (directly or inherited), I created a couple of plain and simple HTML files to test a set of operations to toggle visibity in IE 9 (9.0.8112.16421), Chrome 18 (18.0.1025.168 m), and Firefox 12 (12.0).

The Flash player has version 11.1.102.55, and the Flash object is initialized by swfobject.js.

Each of the 3 browsers were tested on 2 different pages with 3 different toggle operations:

  • Page 1 contained the Flash object inside an iframe inside a div.

DOM hierarchy:
<div><iframe><html etc><div class=”flashContent”>

  • Page 2 contains the Flash object inside a div.

DOM hierarchy:
<div><div class=”flashContent”>

The toggle operations were

  • assign a .hidden class setting visibility to hidden
.hidden { visibility: hidden; width: 0px; height: 0px; }
  • assign a .displaynone class setting display to none
.displaynone { display: none; }
  • using jquery .show() and .hide()

.show() actually does not clear the display: property, but sets it to ‘block’, ‘inline’ etc, which might interfere with other operations, such as addClass(“displaynone”), etc.

Results for Page 1 (using iframe):

IE 9 Chrome 18 Firefox 12
toggling top-level div
hidden ok ok ok
display:none ok ok restart
show/hide ok ok restart
toggling iframe
hidden ok ok ok
display:none ok ok restart
show/hide ok ok restart

Results for Page 2 (directly embedded Flash):

IE 9 Chrome 18 Firefox 12
toggling top-level div
hidden ok ok ok
display:none ok restart restart
show/hide ok restart restart
toggling flash object
hidden ok ok ok
display:none ok restart restart
show/hide ok restart restart

The only method to set a Flash object hidden and visible again while keeping the object running turns out to be setting a CSS class with visibility:hidden.

So I put the code (swf inside iframe) that worked in plain HTML files and added it into a DotNetNuke installation. It almost worked.

A new issue occurred: IE9 was not able to display a Flash object once the visibility:hidden style was removed! F12 did not help me to make the object visible again. Strangely though, using JavaScript to re-assign some other iframe to the same src URL caused the Flash to display again!

$("#someotheriframe").attr("src", 
    $("#someotheriframe").attr("src"));

A DNN page simply contains too much generated code (ASP.Net, MS Ajax, DNN framework, jQuery, various controls and .js files) so that I did not think it was worth debugging the issue further. My JavaScript functions to toggle visibility now contain a browser detection based on $.browser to decide which alternative to choose.

Advertisements

3 Responses to Chrome, Firefox reset Flash plugin if display: property changes (Update)

  1. eferferf says:

    thanks for the throughout research, its really useful for me

  2. Shane says:

    Thank you for this post, it helped greatly! Our code was using “display” and our Flash players kept restarting and losing their state. Switching to “visibility” resolved the problem.

  3. Al says:

    Thank you so much for this post!! I have been struggling with modal visibility in front of a plugin for weeks, and this was the last option I had. Just saved my sanity.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: