02 Jun 2008

FirefoxでFlashが動かなくなるバグ

mixiのCSS系質問で、Flashを貼り付ける際、wmode=transparentを設定するとFirefoxでクリックポイントがずれてしまいまともに操作できなくなるバグというのがあることを知った。
意外と古いバグで、2005年にはbugzillaに挙げられていたようだ。
Firefox2で修正されるとのことだったが、現状では解決されていないor再発したバグの様子。

ishiro » wmode=transparentは不安定

上記サイトではpositionに因るところがあると書いているが、mixiでの質問者の場合はoverflowに因るところがあった様子。

原因

以下のような組み合わせにある時に発生する。

bodyに対してmargin: 0;が設定されている
該当するFlashを囲う要素に対してoverflowが設定されている（いずれの値も不可）
embedのwmodeがtransparentに設定されている

overflowに関しては、最も外側の要素にoverflow設定があると、内部でoverflowの設定がない要素でwrapしてもやはりバグは発生する。

実際に発生するコード

HTML

<body style="margin: 0;">
<div style="overflow :auto;">
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/6cbSZAPwji4&hl=ja"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/6cbSZAPwji4&hl=ja" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
</body>

※コード簡略化のため、CSSはインラインにて記入しています
※Flash部分はYouTube（猫動画）のもの

対策

このバグは以下の3つのいずれかで回避できた。

wmodeを設定しない
wrapする要素にoverflowを設定しない
bodyのmarginを0.1pxにする

まず、wmodeだが、「どうしても設定したい」という場合を除いては、設定しないのがベストかと。
ただ、YouTubeの埋め込み用タグにはこれが含まれているので注意が必要。

次にoverflowだが、例えば複数の動画をiframeのような感じでレイアウトしたいとなるとoverflow:auto;を使わざるを得ないだろう。
width、heightを設定してscrollなどにしても無効だった。
このバグを考慮して最初からそのようなレイアウトにしない、という前提になってしまうのでこの対策は難しいかもしれない。

最後に、bodyのmargin: 0.1px;を設定するというバッドノウハウ的なテクニック。
質問が出てからすぐに色々試してみたが、wmodeとoverflowを残しつつ解決するにはこれが一番早かった。
mixiのほうは取り急ぎこれで解決。
見た目上特に問題はないが、どこかに弊害が出ないとも言い切れないので、自己判断で利用されると良いかと思います。