14763


jQueryのoffsetメソッドで位置情報を取得したら小数点で返ってきました。  
これまでは整数が返ってきていた(と思っていた)ので驚きました。

**jQuery バージョン**  
・1系

**質問1**  
・何か仕様上の変更があったのでしょうか？  
・それとも以前から、位置情報は小数点で返ってくるものなのでしょうか？  
・遭遇したケースが、たまたま整数戻り値だっただけ？  
・ブラウザ位置情報が小数点で返ってくるのは以前からそういう仕様だったのか、知りたいです

**質問2**  
・ここら辺りの挙動は、何をどうやって確認すれば良いでしょうか？(何に依存している？)  
・jQueryバージョン？  
・ブラウザバージョン？  
・両方？


CC BY-SA 3.0
2015-08-23T02:50:08.697
14745
2019-12-13T18:58:04.270
2015-08-23T04:43:10.987
8000
7886
question
javascript jquery
offsetメソッドの戻り値が整数とは限らないのは、以前からの仕様ですか？


  1. 古い仕様までは知らないので質問1は答えにくいのですが、  
座標の性質を考えれば`offset`が浮動小数点数で値を返すのは当然の仕様だと思います。  
わざわざ整数に切り捨てて精度を落とす理由があるとも考えにくいので、  
おそらくですが元から整数を返すというような仕様ではなかったはずです。

  2. 単純に公式のAPIドキュメントを参照してください。jQueryを使う前にドキュメントすべてに目を通すべきなどとは思いませんが、詳細な仕様を確認したいという事態になったら、何はともあれまず公式のドキュメントをあたるべきです。実際に、その点についてちゃんと説明されています。

> Additional Notes:
>
> The number returned by dimensions-related APIs, including .offset(),  
>  may be fractional in some cases. Code should not assume it is an  
>  integer. Also, dimensions may be incorrect when the page is zoomed by  
>  the user; browsers do not expose an API to detect this condition.

<http://api.jquery.com/offset/>

つまり、`offset`は浮動小数点数を返すことがある、整数だと仮定してコードを書くべきでない、とドキュメントにしっかり明記されています。


CC BY-SA 3.0
2015-08-23T06:53:02.317
14754
2015-08-23T06:53:02.317
10330
14745
answer


そもそもJavaScriptという言語には整数型は存在せず、全ての数値は浮動小数点型です。

その前提を知っていれば、jQueryにもブラウザーにも依存しないことが明白で、この質問はあまり意味をなさないことが分かると思います。


CC BY-SA 3.0
2015-08-23T07:12:26.193
14755
2015-08-23T07:12:26.193
4236
14745
answer


小数点数が返ってきそうなサンプルを作ってみました。

[code]

    var atop = $('#a').offset().top;
    $('#ta').val(atop);
    var btop = $('#b').offset().top;
    $('#tb').val(btop);
[/code]

[code]

    #b {
        margin-top: 20.5px;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <p id="a">a</p>
    <p id="b">b</p>
    <p><label>ta</label><input id="ta" type="text"></input></p>
    <p><label>tb</label><input id="tb" type="text"></input></p>
[/code]

手元のChromeではtbが60.5、Firefoxでは61になります。

まず、CSS等での指定では、pxについても小数点数以下で計算しているようで、%で指定したときやズームの時に違いが出るようです。  
<http://masup.net/2014/06/Sub-pixel-rendering-in-modern-browser.shtml>  
ですので、pxに小数点数が現れること自体はおかしいことではないようです。

また、jQueryのソースを見ると、pageYOffsetやclientTopなどのプロパティ値で計算しているようです。計算上pxが整数でないとき、各プロパティ値について、レンダリング上の整数値を返すのか、内部計算での小数点数を返すのかでブラウザ毎に違いが出ているのだと思います。ただ、詳しい資料は見つけられませんでしたので、どちらが本来正しい動きなのかは分かりませんでした。

以上を踏まえてまとめますと、

質問1への回答

jQuery1.6.4にしても動作が同じですので、以前からだったようです。ただ、ChromeかつCSS等でpxが整数値にならない場合でないとでなかったため、気付かなかったと思います。

質問2への回答

私が調べる限り、ブラウザ依存のようです。ただ、pxが常に整数値になる場合は、ブラウザに関係なく整数になります。


CC BY-SA 4.0
2015-08-23T07:20:28.263
14757
2019-12-13T18:58:04.270
2019-12-13T18:58:04.270
32986
7347
14745
answer


jQueryの公式ドキュメント <https://api.jquery.com/offset/>
には、「戻り値は実数になる場合があるため、整数であると仮定してはいけません。」と書かれています。

* * *

ちょっとコードと標準仕様を見てみましょう。

  1. <https://github.com/jquery/jquery/blob/93bee4701d14202045a88aab156da0daf9418430/src/offset.js#L76-L116>  
jQueryの`offset()`は DOM API の`getBoundingClientRect()`メソッドを利用して座標を計算しています。

  2. <http://www.w3.org/TR/cssom-view/#extensions-to-the-element-interface>  
`getBoundingClientRect()`は、`DOMRect`を返します。

  3. <http://www.w3.org/TR/geometry-1/#DOMRect>  
`DOMRect`は座標を浮動小数点数で保持しています。

というわけで、小数になりますね。

[jQuery
コードの履歴を辿ってみる](https://github.com/jquery/jquery/commits/master/src/offset.js)と、2007年
(v1.2) には既に`getBoundingClientRect()`が使われています。これ以前はファイルが変わってしまうので、辿るのが面倒ですね...


CC BY-SA 3.0
2015-08-24T00:12:23.067
14763
2015-08-24T00:27:03.417
2015-08-24T00:27:03.417
4809
4809
14745
answer