forefox transformやoffset座標の扱い

普段、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ではそんな事なかった!!
なんだ、あれは夢か。良かった良かった。

タイトルとURLをコピーしました