Flassari.is

It’s taken me a while to figure this one out. I have a flash game on facebook that uses Stage3D, so window mode has to be set to “direct” which means that any time facebook wants to overlay some elements on the page they appear under the game on many browsers.

Facebook has a solution for you, on FB.init you can set your own callback function via the hideFlashCallback parameter. In this callback you can move the flash object out of view by, for example, setting the top to be -10000px whenever a Facebook dialog is opened and then putting it back when the dialog is closed.

I had functions registered with external interface to pause and resume the game that would get called via javascript in the hideFlashCallback callback.

This was working well enough but for some reason on Internet Explorer I couldn’t call the resume() function just after showing the flash object, instead I got an “Object Expected” error.

Internet Explorer does not support calling external interface methods for flash objects if they are not visible. Since it could be a race condition (DOM might not render the flash object before the function was called) I added a 100ms delay to the call to resume(), only for IE. This seemed to work fine.

But once we got close to production this error re-appeared, but only when Facebook’s purchase dialog had been shown. Weird! No amount of delay made the external interface calls work again. If I showed the purchase dialog once and closed it, it would be no longer possible to call any external interface functions for the flash object until a page refresh. This was not acceptable.

After a lot of debugging, I noticed that even though we have registered for the hideFlashCallback function, facebook STILL sets the visibility of the flash object to “hidden” after 200ms.

As can be seen in Facebook’s documentation: “The custom action must complete within 200ms or the Flash object will be hidden automatically regardless.”

Apparently the fact that we’re changing the visibility of the flash object along with whatever facebook does differently during the purchase dialog (overlay a white div over the whole page) breaks all external interface functionality.

This has a simple fix though, create a higher priority CSS rule that makes the flash object always visible:

It doesn’t need to be hidden since we are moving it out of view ourselves anyways.