safari(PC)でjQueryのoffset().leftが正常に取れない問題


先日少し詰まったところのメモ。
safariって盲点になりやすいし、何よりIE8とかに比べて情報が少ないから本当に嫌い・・・・。

背景及び現象について

とある要素Aの左側にfixedのコンテンツBを置きたかった。
ただし、コンテンツ幅が決まっているため、CSSでやろうとすると限界がある。
そこで、Aの位置をjQueryのoffset().leftで取得してその値を利用しようということになった。
で、その案件がIE10以上ということで検証していて、chrome、firefox、IE10、IE11まではうまくいったのだが・・・
safariだけリサイズ時の値がおかしい
厳密に言うと、小さい画面から大きい画面にしていく時のリサイズは正常らしき値は取れているが、大きい画面から小さい画面にしていく時のリサイズが10pxほどずれる。
解決方法はというと2つ

リザイズ終了時に取得する

http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac
http://black-flag.net/jquery/20151020-5801.html
ここら辺を参考にすることでリザイズ終了時を取得することができる。

単純に、offset()以外の方法で座標を取得する

とある要素Aの位置をCSSで指定していて、Aの要素は長さが変わらないものだったのでこっちで対応した。
CSSでAをその位置に置いたやり方を式にして、それを元に事実上のoffset()を取得した。
わかりやすくいうと、コンテンツ幅が1080に対してとある要素Aが右寄せ800pxで存在するなら、左の空間は1000-800の200px。
ただし、$(window).width()が1080以上の時、コンテンツは中心にあるから・・・

$(window).on("resize",function() {
    var ww = $(window).width();
    if (ww > 1080) {
        var s = (ww-1080)/2;
    } else {
        var s = 0;
    }
    console.log("とある要素Aのoffset().leftはここ"  + s)
});

結局原因はわかってないんだけど、とりあえず解決方法として・・・。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。