普段、chromeをメインブラウザにしていても開発ではfirefoxなど別のブラウザで動作確認をしないわけにはいかないもの。
最近かなりハマったchromeとfirefoxの違いを2つ紹介します。
1.firefoxだとtranslate3d、scale3dなどのtransformが無い
jqueryでdiv要素などの座標を操作するよりも、css3のtransitionとtransformを駆使して要素を動かしたほうが動作が軽快という自体があり、
さらに
-webkit-transform: translate(100px, 100px);
-webkit-transition: -webkit-transform 1s;
とやるよりも
-webkit-transform: translate3d(100px, 100px, 0);
-webkit-transition: -webkit-transform 1s;
とやるほうがchromeさんは爆速になるという話がある。
しかし、これのtranslate3dがfirefoxだと動かない。
firefoxではtranslate3dがないらしい・・。
-moz-transform: translate(100px, 100px);
-moz-transition: -moz-transform 1s;
でもなんで3dを使うだけでchromeさんはめちゃ早くなるんだろう・・。
2.firefoxにoffset座標が無い
実は有名な話だったらしい。
firefoxでマウスイベントを取った時のイベントオブジェクトにoffsetXやoffsetYが入っていない。。
firefoxのイベント内でoffset座標を取得したい時には以下のような計算で求めた。
$('#sono2').on("mousedown", function(e){
var offsetX = e.pageX - e.currentTarget.offsetLeft);
var offsetY = e.pageY - e.currentTarget.offsetTop);
});
※jQuery使用
つまりは、マウスのpage座標から要素のoffset座標を引くとマウスの要素を基準としたoffset座標が手に入るということ。
面倒だぜ。
3.firefoxは座標がtranslate前の座標になる。
translateで0pxの位置から右に100px動かしたとする。
この時、jqueryでoffset()を取得したりすると、
Chrome 100px
Firefox 0px
と、firefoxではtranslate移動前の座標が帰ってきてしまう・・・。
と思ったら!!!!
最新のfirefoxではそんな事なかった!!
なんだ、あれは夢か。良かった良かった。