如何获取元素的偏移量（跨浏览器+移动）

Question

为了达到多种目的，我一直在努力弄清楚如何在页面上获取元素的偏移量。但是，当我进入移动设备（以及缩放+平移）或从Chrome切换到Firefox时，我发现和使用的所有内容似乎都会中断。

我的第一次尝试看起来像这样：

$(element).offset();

这在桌面上非常有用。适用于所有浏览器！但是，在Chrome移动设备上，它并不总是有效。如果页面被平移到左上角并且一直缩小，它就像一个魅力。一旦放大然后平移，事情就会出现问题。由于某种原因返回的偏移量发生了变化。

接下来我试了......

element.getBoundingClientRect();

但是，如果您向下滚动页面（在桌面上），此解决方案似乎会发生变化。更糟糕的是，Chrome中的功能似乎与Firefox手机上的功能完全不同。

我找到的唯一解决方案是rangeslider.js。他们创建了一个函数，从元素一直到顶部遍历父树，在整个过程中累积偏移量：

function getPositionFromNode(node) {
    var i = {"top":0, "left":0};
    while (node !== null) {
        i.top += node.offsetTop;
        i.left += node.offsetLeft;
        node = node.offsetParent;
    }
    return i;
};

也许我很挑剔，但这不可能是唯一的解决方案......可以吗？这看起来很愚蠢。必须有某种内置的浏览器功能，可以让你获得元素的偏移量。正确？