SIMILE Timelineのbubble/吹き出しの高さ問題

SIMILE Timelineの不具合を暫定的に解決したのでメモ。

イベントをクリックしたときにbubble(吹き出し)が表示されるけど、リモートサイトの画像URLをeventのimageに指定していると、１回目のクリックのときbubbleの高さが短くて内容が隠れてしまう。２回目のクリックでは本来の高さで表示されるので、どうやら高さを計算するタイミングが早すぎるようだ。

このbubbleの要素のレイアウトをFirebugで調べてみたら、画像imgの上にdivが4枚重なっていた。面白いことにimgのすぐ上のdivは高さが342なんだけど、さらにその上のdivから先が47に縮んでいた。問題のdivのclassは、

class="simileAjax-bubble-contentContainer simileAjax-bubble-contentContainer-pngTranslucent"

これを手掛りにquery.jsのソースを追ってみたら、

SimileAjax.Graphics.createBubbleForContentAndPoint

にsetTimeout()を実行している箇所があった。
ここでスクロールが必要かどうかの判定とかをやっているのだが、setTimeoutの指定時間が200になっている。たぶんこの時間が短すぎるので、画像のダウンロードが完了しないうちに高さを参照しているのではないか。というわけで値を500に変えたら、１回目のクリックでも正常な高さで表示できた。