Question

定位工具提示/弹出窗口通常只是使用 getBoundingClientRect（）或jQuery的 offset（）函数（内部使用getBoundingClientRect）获取相对于的偏移量的情况。文档或窗口，但如果你放大一些Webkit浏览器，这些函数会开始返回意外/错误的结果，因为getBoundingClientRect函数在Webkit中很奇怪地实现。这一直是一个问题，由于某种原因从未得到解决。

问题：我如何（如果可能的话）计算元素相对于文档的精确像素偏移量，而不使用getBoundingClientRect（），以便值不改变变焦？

Answer 1

我能够在https://jsbin.com/vaculorita/1/edit?css,js,output

中解决这个问题

我不确定jQuery的偏移是怎么做的，但切换到绝对定位和手动使用getBoundingClientRect的组合对我有效。

HTML

<div id="tooltip">Tooltip</div>
<input type="text" id="username">

CSS

#username {
  margin-left: 54px;
  margin-top: 21px;
}

#tooltip {
  position: absolute;
  left: 0;
  top:0;
}

JS

$(function() {
  function moveTooltip() {
    var $tooltip = $('#tooltip').first();
    var $input = $('#username').first();
    var rect = $input.get(0).getBoundingClientRect();
    $tooltip.css('left', rect.left + $input.width());
    $tooltip.css('top', rect.top + $input.height());

  }

  moveTooltip();

  $(window).on('resize scroll', moveTooltip);
});

在没有getBoundingClientRect的情况下获取相对于文档的元素偏移量（Webkit bug）

1 个答案: