flash【safariだけcssのoverflow:hiddenが適用されない場合の解決方法】

他のブラウザではちゃんとflashがoverflowで表示されるのに、safariだけoverflowがまったく効かなかった。

何がしたかったのかというと、flashのステージの大きさを動的に読み込むflvの大きさに合わせてactionscriptで小さくできたらいいんだけど（flvは複数あってかつ大きさは不定、ただしステージの大きさを超えることはない）、それがどうも難しそうなので、overflowで見える範囲を小さくすることにした。
IEおっけー、FFおっけー、くろーむおっけー、さふぁりおっ、おおっっ！なんだこのひどいレイアウトは！

どんな見た目になっていたかというとoverflowでhiddenにしたはずの領域がもろ前面に出てきている。
おかげでその下のhtmlが隠れてしまって、クリックできない。

原因をいろいろ調べたのだけど、海外のサイトだとz-index指定やらiframeを使えやら、overflowのdivにposition:relativeにしろやら、いろいろ書いてあったけどiframe以外全部試したけどだめだった。

藁にもすがる思いで日本語のサイトに絞って調べてみたらジャストな方法が見つかったのでtips。

環境はwindows 7 professional 64bit OS
safari5.1.7(7534.57.2)

htmlは肝心なとこ以外省略しています。

ごくごく普通のflashの表示方法。
ただし、
param name="wmode" value="opaque"
と
wmode="opaque"
が非常に重要。

<div class="container">

  <div class="wrapper">

    <object class="mov">

      <param name="movie" value="…">
      <param name="wmode" value="opaque">

      <embed class="mov" src="…" wmode="opaque">

    </object>

  </div>

</div>

そして

div.container {
  width: 660px;
  height: 380px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

div.wrapper {
  width: 760px;
  height: 600px;
  position: absolute;
  top: -110px;
  left: -50px;
}

.mov {
  width: 100%;
  height: 100%;
}

これでばっちり表示できました。

safariで表示するflashはこのwmodeをopaqueにしないと、z-indexを無視して最前面に強制的に表示されるらしい。

このパラメータはわからなかった。。。