the renaissance man

ModalBox and Flash Issue Solution

I have been trying to adapt Andrej Okonetschnikow’s ModalBox for use on our site at Fylmz.com. We were having some issues with the many Flash objects on our site displaying above the modalbox or flickering through the overlay. This is pretty typical and is something that many of the modal solutions faced with HTML select boxes in IE.

The common solution for this was to set the “wmode” for the Flash objects to “transparent.” This would make the Flash objects obey the z-order for all the objects on the page and consequently ModalBox would work correctly. There’s a problem here though. On Mac, when one uses “wmode = transparent” for Flash objects, some serious bugginess appears in the Flash player.

We experienced weird mouse behaviors and odd movie flickering and resolution issues with symbols within the movies. All of these problems only appeared on the Mac in Safari, Camino, and Firefox with versions 8 and 9 of the Flash player and disappeared when we got rid of the “wmode = transparent” parameter for the movies.

So, here’s the solution I came up with that provided us an acceptable result. It does not “solve” the problem, but was an acceptable compromise for us.

First, we detected whether the user was on Mac or Windows.

If they are on Windows, I dynamically write “wmode=transparent” for the Flashobjects in the page and ModalBox displays above them as expected.

If they are on Mac, the wmode is NOT set to transparent. I wrote a small function in modalbox.js to hide or show the Flash object which looks like this (adapted from Lightbox Gone Wild):

It’s a hack and can be done better, but it works and I just wanted to prove that it was possible. This function would be called in the “show” and “_deinit” function of modalbox.js:

this._hideFlash('hidden');
or
this._hideFlash('visible');

All of this results in the ModalBox working fine in Firefox and IE on Windows and Firefox and Safari on Mac. The Flash movie will disappear on Mac and will start playing from the beginning each time the box is displayed in Firefox, but these are things we can live with. Your concerns will be different.

I know this is not the clearest write-up, but it seemed that a lot of folks are struggling with this so I wanted to post it quickly. Comment or email with questions and I will try to help.