Safari 的 getBoundingClientRect() 实现返回不正确的顶部

Question

我有一个

div

和

float: right

，我正在尝试获取它与视口顶部的距离。在除 Safari 之外的每个浏览器中，我都从

element.getBoundingClientRect().top

获得了预期的结果。 Safari 似乎报告元素距页面顶部而不是视口的距离。这与此方法的规范中的定义相反（据我所知）。 Safari 只是不遵守这里的规则，还是其他浏览器对我的一些我没有看到的错误更宽容？

Answer 1

这似乎是一个错误，会影响 Safari 在其加载事件上报告元素和滚动位置的方式。如果您以 500 毫秒的超时运行完全相同的调用，一切都会按预期工作。

当我收到我的错误报告时，我会更新。

Answer 2

有同样的问题，500ms 技巧并不能解决我的问题。

所做的工作是在正文末尾添加一个脚本（任何脚本，甚至是空脚本）。

如：

[...]
  <script type="text/javascript">
    //content doesn't matter
  </script>
</body>
[...]

Answer 3

您可以尝试等待字体就绪的全球承诺：

document.fonts.ready.then(() => {
   const {top} = element.getBoundingClientRect();
})

Answer 4

截至 2024 年，Safari（macOS 和 iOS）在刷新后自动滚动之前仍然会触发 DOMContentLoaded 和 load 事件。我最终将处理程序置于 onscroll 并使其触发一次。