Firefoxのelement.offsetTopが上手く動かないときはElement.getBoundingClientRect()を使う #JavaScript

FirefoxでoffsetTop/offsetLeftが上手く動かない（ことがある）

Firefox（36.0.1）でelement.offsetTopが上手く動かないことがあります。
例えば487個のspanから順番にoffsetTopを取った時、期待した値と違う値が取れることがあるます。

残念ながら再現コードはありません。

代わりにElement.getBoundingClientRect()使う

Element.getBoundingClientRect()を使うと正しい位置が取れます。

ただし、offsetTopと違い絶対位置を取得します。
相対位置を取るにはoffsetParentの位置を引きます。

<style>
    .base,
    .main {
        position: relative;
        top: 25px;
    }

    .base {
        background-color: blue;
        width: 100px;
        height: 100px;
    }

    .main {
        background-color: red;
        width: 50px;
        height: 50px;
    }
</style>
<div class="base">
    <div class="main">
    </div>
</div>
<script>
    var element = document.querySelector('.main')
    console.log(element.offsetTop) //25
    console.log(element.getBoundingClientRect().top) //58
    console.log(element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top) //25
</script>

こんな感じです。

動くサンプルです。
http://jsfiddle.net/4hjbzc20/

Firefoxでも487個のspanからoffsetTopを取れます。

参考になるリンク

jQuery最高！