wmode を transparent に指定すると Firefox でボタンが押せなくなる

先日、Flash ムービーのボタンが押せなくなる不具合に遭遇した。wmode を transparent に指定していたことが根本の原因のようだ。

発現環境は、WindowsFirefox のみ。wmode が transparent に指定されていることに加え、幾つかの条件が重なることで発生する。また、「押せない」状況にも 2 つのパターンがある。1 つは、ボタンの上にカーソルを移動すると、一瞬だけカーソルの形状が変わるパターン。2 つ目は、ボタンのヒットエリアがズレるパターンである。

一瞬だけカーソルの形状が変わる

  1. wmode が transparent に指定されている
  2. Flash ムービーを梱包している要素の overflow が auto/scroll に指定されている

場合に起こる不具合。ボタンの上にカーソルを移動して over イベントが発生するものの、over 状態を保てない = 押せない現象が起こる。結果、カーソルを移動するたびにボタンが over/out を繰り返し、一瞬だけカーソルの形状が変わる。もし、ボタンのグラフィックが over/out で異なると、グラフィックがちらついて見える。

ボタンのヒットエリアがズレる

  1. wmode が transparent に指定されている
  2. Flash ムービーを梱包している要素の position が fixed に指定されている

または、

  1. wmode が transparent に指定されている
  2. ウィンドウのスクロールなどにより、Flash ムービーの左端または上部が表示されていない

場合に起こる不具合。ズレのパターンによると、実際に表示されている Flash ムービーと、ボタンのヒットエリアを含む領域 (レイヤーのようなもの?) との間で、座標の相違が生じているように思える。

従って、前者は position を fixed に指定したとしても、Flash ムービーがウィンドウの左上 (body の margin、padding 共に 0) に置かれていれば、ズレは発生しない。

後者は、初回表示時に Flash ムービーの左上がウィンドウ内に表示されていれば問題ない。ウィンドウをスクロールさせて Flash ムービーが半分だけ見える状態にし、ブラウザをリロードするとズレが生じる。

また、ズレた状態で右クリックのコンテキストメニューを表示すると、メニューの表示位置もズレている。

この件は、Bugzilla にポストされているFirefox 2 で直るらしい?

transparent の挙動に関するリソース