Monday, 24 September 2012

DIV Overlay on Flash

I have had my client come up to me with a very weird issue that only seem to be happening in Firefox.

Website that I'm working on has a lot of overlays (mostly with iframes). When an overlaying window opens it normally greys out an area underneath it by using DIV that stretches across the whole screen (standard practise).


Problem: Main page has a large flash animation right in the center of the page. When overlay is showing everything on the background BUT the flash is being greyed out. Therefore the DIV is not covering the Flash object.

Browsers Affected:

  • Mozilla Firefox 15.0.1

    Solution
    My first gut feeling was that z-index is not set correctly, however after quick play around with firebug I discovered that this was not the case here.

    Secondly I started playing around with Flash object tag since I have heard of WMode that is usually causing this sort of issues. I saw that parameter "WMode" is already set to "Transparent" which is what it should be.

    I had to dig deeper. After couple of hours of testing different approaches; order of divs, z-indexes, different parameters for object I finally found my missing puzzle.

    Both object parameter as well as embed tag need WMode set to transparent. Simply setting just object parameter doesn't work!

  • No comments :

    Post a comment