ある案件で、プルダウンメニューの下にFlashを配置するウェブサイトを制作しました。
こういった状況で必ず問題になるのが、JavaScript（HTML）がFlashの背景に隠れてしまう、というものです。Flashはz-indexを認識しないため、CSSで重なりの設定しても効果がありません。
そんな場合の通常の解決策が、flashを設置しているタグにwmodeのtransparentを指定してあげるというものです。
●objectで指定する場合は下記を追加
<param name="wmode" value="transparent" />
●embedで指定する場合は下記を追加
<embed wmode="transparent"... />
●swobject.jsを使っている場合は下記を追加
so.addParam("wmode", "transparent");
この解決策にもデメリットがあり、Flashの中に入力要素があったりすると入力できなくなったりするそうです。
まぁ私の案件ではFlashは単純にonclick等で動かすだけのものだったので、特に問題なしと思っていました。
が、先日問題を発見。
windows版safariのバージョン4.0以降で見てみると、上記指定が効いておらず、プルダウンがFlashの背景にいってしまいます。
調べたところバージョン3.0では問題なかったようです。
海外のサイトを含め、かな～り調べて試しましたが、7月9日現在根本的な解決策は見つかっていません。
ただ、ここまでの調査で分かっているのは下記のとおりです。
・windows版safariのバージョン4以降で発生。mac版では問題ない。バージョン3以下でも問題なかった可能性大（他のサイトの情報から）
・IE6、IE7、IE8、Firefox2、Firefox3、Google Chromeでは問題なし
・インストールされているFlash playerが新しければ問題なし。10.1であれば問題が発生しないのを確認。
とりあえずはFlashのバージョンが新しければ問題ないので、win版safariのシェアも低いことですし今回はそれでなんとか収まればよいのですが。。。
根本的な問題解決策は、今後も探してみようと思います。
もし解決策をご存じの方がいらっしゃいましたら教えてください。m(_ _)m
【追記】
解決策、なし。まぁFlash更新されりゃ問題ないからいいでしょう。
コメント