THE HAM MEDIA BLOG

バグ?jQueryのanimate、IE6だけ動作が違う?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
font
バグ
IE

jQueryのanimate、IEだけ動作が違う?

先日書いた「jQueryの勉強:自作関数?
これを読み返していて、プレビューを実行。
そこでなぜか違和感を感じる動作をしていることに気づく。
「あれ?コレの実行って文字が大きくなってから
 指定の大きさになるんだっけ?」

いやいやいや、そんな指定はしていない。
小さい文字から大きくなるアニメーションのはずだ。

作ったときはFirefoxでプレビューしていたから気づかなかったけど、
どうやらIE6で見たときに違う動作をするようだ。

一体なぜ!?

原因を探ってみることにした。



問題の動作が起きたスクリプト

$("div.prev01").animate({fontSize: "5em"},1000 );

これのどこに問題があるのかわからなかったので、
いろいろ変化させてみたところ、
どうやらfontSizeのところでの指定の仕方にあるということがわかった。
emを指定しているとIE6のときに大きくなてから指定の値になるという動作を起こす。
%に変えてみたところ他のブラウザと同じ動作をしました。

下にプレビューを書いておくので、
IE6と他のブラウザで動作をみてください。

プレビュー

下記のプレビュー、IE6だと上の方の動作が違います。
上が文字が4emにアニメーションするもの、
中が文字が400%にアニメーションするもので、
下が文字が48pxにアニメーションするものです。

動作プレビュー

アニメーションします
アニメーションします
アニメーションします

ちなみにIE7は未確認なのでどうなるのか不明です。
Firefox3とOpera9.5、Google Chromeだとどれも同じで
小さい文字から大きい文字へと変化します。

IE6だと、真ん中の%を指定したものだけ
小さいのから大きい文字に変化しますが、
上下の二つは動作させると大きい文字から小さい文字へと動くようです。

つまり%の指定なら問題なく動作するのでしょうけど、
emとかpx指定だとおかしなどうさをするということ。

これはなぜ!?
それと、ピクセル指定の方がem指定よりも
最初に見える文字の大きさがハンパないように思えるが・・・

とりあえずは%で対応するようにしたほうが無難かもしれない。

どなたかIE7で見たときの動作とかも教えていただけたらうれしいです。



この記事へのコメント
IE7で見てみましたが、IE6と同じ動作のようです。
Posted by kyo_ago at 2008年10月06日
>kyo_agoさん
報告ありがとうございます!!
ということはIEでは同じように動作してしまうってことですね。
%だと大丈夫で、emやpxだと変化するってのが疑本当に疑問です。
Posted by ハム at 2008年10月08日
IE6、jQuery1.4.2だと
上中の大きさと下の大きさが違いますね。
動きは同じでしたが。
Posted by あ〜さ〜 at 2010年06月24日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。