Mac OSX / Firefox 1.5で再現性を確認。
Windows / Firefox 2.0では問題無し。
元アニメーションGIF
横100px × 縦50px,3フレーム。
2,3フレームは右側を透過(透明)にしている。
上記のアニメーションGIFをCSSで背景画像で指定してみる。
ここには面倒だったのでインラインで指定してます。
Mac OSX / Firefox1.5の環境だと、2フレーム目だけの右側の透過部分が幅が無いように認識されてリピートされてしまう。
CSSでの指定はこんな感じ。
#bg_gif{ width:100px; height:50px; text-indent:-1000px; background:url(gif_anime.gif) no-repeat; }
回避策は透過させない事ぐらいしかなかった。。。うーん。 MAC OSX/Firefox2.0で解消されてるかは今度検証してみます。
追記 ) 2007/03/04
Mac OSX 10.4.8 / Firefox2.0.0.2の環境でも現象の再現を確認しました。
うーん。。。
コメント