- 2008-11-04 (火)
- 技術
ここ最近JavaScriptでアニメーションする機会が結構増えてきたのですが、やっぱりブラウザによって速度というか動きがかなり違うので、その比較をメモメモ。
IE6.0
IE6.0は以外にもアニメーション処理は速いというか滑らかです。前にもJavaScriptでアニメーション（animate）するときに気をつけたいことで紹介しましたが、中に画像がたくさんあるdivタグをmargin-leftとかでアニメーションすると激重になる可能性があるので注意が必要です。
position:absoluteでのアニメーションはかなり調子良いです。
IE7.0
比較的問題がないブラウザです。
marginを使ったアニメーションにも強いですし、opacityを使って透過してフェードアウトとかにも強いです。
IE7.0は重い重いという話が良くありますが、アニメーションに限ってはなかなか出来るやつですｗ
Firefox2.0
これが一番曲者かと。アニメーションする際に対象のdivタグがoverflow:autoになっていると、すごいチラ付きが発生しますし、アニメーション処理自体にもモッサリ感があります。
このoverflowの話は結構面倒で、今まではIEとIE以外のJSコードを分ける処理は結構書いていましたが、Firefoxの場合にもoverflowをhiddenにしたりautoにしたりと独自実装になる感じです。
Firefox3.0
Firefox2.0と比べるとまぁ良いのですが、タブをいっぱい開いていたりFirefoxのメモリ使用量が多いとアニメーション時にもたつく感じがあります。（これはFirefox2.0も同じです）こちらもoverflowは対策が必要です。
Opera9
Operaのアニメーションはとてもきれいです。 margin、positionとも滑らかにアニメーションします。ただLightBox風のJSを作る場合に、レイヤーを貼った上にボックスを表示してその表示方法がアニメーションのときにはちょっと注意が必要です。
input type="button"を押したらボックスを表示するとして、レイヤーが表示され始めているのにレイヤーの後ろにいるbuttonを押せてしまう場合があります。
つまりレイヤーが表示されたタイミングでbuttonのonclickをfunction(){}（つまり空）にしてやるとか、それ以外でフラグを使ってすでに押されていることを把握する必要があります。
（※これは画像ボタンにすることで解消されるかも？未検証）
Safari3.1
完璧なブラウザです。
特にアニメーションに限っては文句の付けようがない感じです。
Safariの欠点は、Safariでは画像のloadが終わっていないとwidth、heightがうまく取得できないでも紹介しましたが、jQueryのreadyではDOM構築が終わっていない場合があるので、アニメーションさせたい対象のエレメントの幅を取得したい場合はonloadを待つほうが無難かもしれません。
Google Chrome
Safariと同じWebkitベースのブラウザなので、同じくキレイです。ただ、ちょっと未確認なんですがJSファイルをBOMありのUTF-8で保存した場合に、うまくJSファイルを読み込んでくれなかったです。
他のブラウザでは問題なかったのですが、Google Chromeだけで発生しました。
対応としては、BOMなしのUTF-8Nとかで保存しました。
う～ん。
Netscape7
アニメーションはFirefox2.0よりは滑らかに感じますが、やはりちょっと微妙です。
各ライブラリがNetspaceに対応していないのもあり、opacityの透過などは自前で容易する必要もあったりします。
一応Netscapeではfloatしているブロックにrelativeをかけても効かないでちょっとした欠点も載せているので参考にしてください。
これ以外にアニメーションと関係ないですが、CSSで
「background: url(/hogehoge.gif) no-repeat left 7px;」
みたいにピクセル単位で座標を指定する場合がありますが、これにはNetscapeは対応していません。
いろいろ試してはみたのですが、ダメでした。
なので、
「background: url(/hogehoge.gif) no-repeat left center;」
などで対応。
まとめ
全ブラウザで同じように見せるスタイルシートも大変な作業ですが、JavaScriptを使ったアニメーションもブラウザの個性に対応しないといけないので、まだまだクロスブラウザ対応は必要そうですね。
Ajaxのオブジェクト（XMLHttpRequest or Msxml2.XMLHTTP）や基本的なDOM操作はライブラリが吸収してくれますが、アニメーションに限ってはどのスタイルを使ってアニメーションをするかは自分で決めなきゃいけないので、これからいろいろ調べていきたいと思います。
とはいってもjQueryのanimateメソッドにはすっごく助けられていますがｗ
■参考記事
jQueryのanimateメソッドの使い方
JavaScriptでアニメーション（animate）するときに気をつけたいこと
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1135
- Listed below are links to weblogs that reference
- ブラウザごとのJavaScriptアニメーション比較 from HouseTect, JavaScript Blog
