Konquerorで画像の入れ替えJavascriptで不具合が発生するケース

Konquerorというのは、Linuxのブラウザである。私が作成しているサイトでは、Linuxは非対応とうたっているので、Konquerorで表示がおかしくても問題ないといえば問題ないのですが（実際、統計的に見ても4千人に1人ぐらいしかアクセスしているユーザーはいません。）、最近はKnoppixなどでお気軽にLinuxが試せてしまいますので、お気軽にテストしたくなります。

最近、テストしていたら、不可解な現象が起きました。画像の入れ替えをJavascriptで行うことは結構あります。マウスを画像の上に載せると画像が切り替わるrollover（ロールオーバー）などが代表例ですね。Konquerorでは、特定の条件下では、画像がうまく切り替わらずに、元もとの画像Aの上に別の画像Bが描画されたり、全く切り替わりが起こらない現象が起こります。

※  最初、青色の画像だけが設置されたところに、ボタンをクリックするごとに、青色→黄色→青色→黄色→青色と変える単純なスクリプト（設置サンプル）でテストしてみました。青色の画像と黄色の画像のサイズ（widthやheight）は元々同一ではありません。合同ではありません。

本来、1回目のクリックで、青色の画像が消えて黄色の画像だけが表示されて欲しいのですが、Konquerorでは、青色の画像が残ったまま、黄色の画像がその上に描画されてしまう（本来、背景色の薄いピンクの模様にならなければならないところが元の青い画像のままで、再描画されていない、というのが正確な言い回し？）。

これは2枚の画像のサイズ（widthやheight）が異なることが根本的な原因ですが、当然（?）他のブラウザではこのような現象は発生しません。また、Konqueror（テストに使用したのは、Knoppixに付属のKonqueror3.4.2と3.3.1）では、「最初の1回目だけ」この現象が発生し、2回目以降ではこの現象が発生しません。つまり、Konquerorでは、青色→青色と黄色の混合→青色→黄色→青色と変化していきます。

結論から言いますと、Konquerorでは、KDE Bug Tracking Systemに報告されている「Bug 25317: javascript bug, image width wrong at first change (testcase) 」がまだ直っていないようです。

現象を検証するために、サンプルページを準備しました。画像の入れ替えに使う２枚の画像のサイズ（widthやheight）が異なる場合、元もとの画像の上に新しい画像を描画しようとするため、元もとの画像の方が大きい場合に、画像の一部が残ってしまいます。最初の画像の方が小さい場合は、この不具合は発生しません。

さらに、別の、サンプルページを準備しました。2枚の画像のサイズは全く同じものの、本来の画像サイズとは異なる画像サイズ（imgタグ内のwidthやheight）を指定している場合、画像の切り替わりが行われていないように見える現象が発生します。

しかも、このバグは不思議なことに、「最初のクリック1回目」の時のみ発生し、2回目以降のクリックでは発生しません。上記で紹介したバグ・レポートの英語でも、「at first change 」とわざわざ断っているのは、そのためです。

要は、画像の切り替わりの際に使用する2枚の画像のサイズ（widthやheight）を統一し、本来の画像サイズとは異なるwidthやheightをimgタグの中で指定していない限りは、問題は発生しないのですから、ほとんどのrolloverスクリプトでは問題が発生しないはずです。しかし、私のサイトで使っているスクリプトではどうしても2つの条件に違反せざるをえない部分があって、Konquerorでは問題が発生してしまいます。

なお、二つの条件にともに違反すると、さらにバグが複合化して、ものすごいことになります。サンプルページをこちらに準備しました。