Safari 4 z-index issue with Flash

Posted by Dan on Jun 10, 2009 @ 4:01 PM

I was doing some testing with Safari 4 (on Windows Vista) and noticed that it was running into the z-index issue that's normally fixed by having a wmode attribute. The issue is that Flash was always displaying on top of all other elements. Normally this can be fixed by applying the wmode attribute of either "opaque" or "transparent" to your SWF, however that was already present.

After playing around with the problem for a good bit trying various solutions of applying an z-index to elements, I decided to check to see if I had the latest version of Flash installed. Turns out I was running Flash 10,0,22,54 and 10,0,22,87 is the latest version. Sure enough, after upgrading Flash everything started working as expected.

So, if you're having problems with Flash being overlaid over all of your elements in Safari, try upgrading to the latest version of Flash to see if it fixes the problem.

(To see how things should work, check out http://pipwerks.com/lab/swfobject/z-index/2.0/dynamic.html. If mousing over the menu options is not showing some pop-up elements, then something has gone awry—so try upgrading Flash.)

Categories: HTML/ColdFusion, Flex/Flash

18 Comments

  • simonjs's Gravatar
    simonjs
    Thanks, for this! I would have been messing around with CSS for ages trying to get this to work, you've save be a lot of trouble.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @simonjs:

    Do you know what version of Flash you installed previously?
  • brjames's Gravatar
    brjames
    Thanks this was very helpful!
  • Stig Manning's Gravatar
    Stig Manning
    Thanks for this, was worried it was a swfobject compatibility issue
  • Jorny's Gravatar
    Jorny
    I was doing some testing with Safari 4, too. I installed Safari 4.0.2 and every site with element over flash elements has problems, including http://pipwerks.com/lab/swfobject/z-index/2.0/dyna.... I try with a "div" over a Flash with AS3 including with the new plugin of Dreamweaver CS4 and the same way. I am very annoyed with this situation...
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Jorny:

    Try reinstalling Flash or upgrading to the latest version--that's how I resolved the issue for me.
  • Matthias's Gravatar
    Matthias
    Thanks for this blogpost! The whole time testing I thought my z-indexes or false markup is causing this error. So you saved me a lot of time.
  • MAdMAn's Gravatar
    MAdMAn
    This fix does not work for me in Safari 4 public beta. Even with the most recent Flash Player update. ARG.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @MAdMAn:

    Why are you still running Safari 4 beta when it was officially released a while ago? I'd recommend getting off the beta and actually download the full release.
  • syed's Gravatar
    syed
    thanks, worked perfect for me, I was messing around with css, after reading your post I updated flash player and my problem solved. thanks.
  • Ian Brown Photography's Gravatar
    Ian Brown Photography
    This saved me some work!! Thanks! Whats with this being unique to Safari on Windows????!!!!

    Ian B
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Ian:

    No clue, but I suspect it's a Safari installation bug. My guess is it was less Flash and more something to do with the way Safari inherited the plug-in.
  • Huh?'s Gravatar
    Huh?
    What good is updating your Flash player when you can't make everyone else who sees your site update theirs? I'm having the same problem with Safari. I need a workaround that won't require others to update Flash.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Huh?:

    Since the problem appears to be with Safari, I don't think you'll find a workaround solution.

    You could hide the entire SWF or maybe even attempt the old IE iframe hack (but I doubt that will work.)

    Fortunately, the user base of Safari is still relatively small.
  • Aviad's Gravatar
    Aviad
    I have the latest versions of both safari and flash player.
    However, I got the GWT component popup with z-index:5100 hidden under the flex iFrame with z-index: auto.
    Any clue how to solve it?

    http://s004.radikal.ru/i205/1002/c7/a389ef8ae173.j...
    Aviad.
  • Nádia's Gravatar
    Nádia
    Just update safari and flash player.
    The lastest version work properly. :)
  • Vaibhav's Gravatar
    Vaibhav
    hi,
      i am using JRE 1.5 on MAC. the problem is with my html menu. The menu is hiding behind the applet while it works fine in IE and Mozilla on Windows OS but on MAC OS , safari is giving this issue.
  • Rob Frustrated Web Guy's Gravatar
    Rob Frustrated Web Guy
    Seriously you ROCK!!! I was starting to pull my hair in clumps messing around with z-index and css. I too only had a problem with Safari. Friggin' flash update. Simply brilliant that you thought of that, that it actually was the problem, and that it was ever a problem in the first place. Now my project is only 5 hours behind! You eased my pain a little today.

Comments for this entry have been disabled.