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

Posted 2023-03-31

【中文标题】Safari 的 getBoundingClientRect() 实现返回不正确的顶部

【英文标题】：Safari's getBoundingClientRect() Implementation Returns Incorrect Top

【发布时间】：2014-10-13 19:45:11

【问题描述】：

我有一个div 和float: right，我正在尝试获取它与视口顶部的距离。在除 Safari 之外的所有浏览器中，我都从element.getBoundingClientRect().top 获得了预期的结果。 Safari 似乎在报告元素与页面顶部的距离，而不是视口。这与spec for this method 中的定义相反（据我了解）。是 Safari 只是没有遵守这里的规则，还是其他浏览器对我的一些我没有看到的错误更加宽容？

【问题讨论】：

您在其他“移动”浏览器中是否也有相同的体验？

这不在 Mobile Safari 上。

【参考方案1】：

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

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

【讨论】：

您收到回复了吗？

@RomanSnitko 不。 5年没见了。我最近没有检查它是否仍然是一个问题。这是票：feedbackassistant.apple.com/feedback/5842026

这个解决方案对我不起作用，但在正文末尾添加一个空的

这个解决方案对我有用（y）。在运行我的函数之前添加 500ms 或 addEventListeners('load', () => 。空脚本标签不起作用。

【参考方案2】：

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

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

如：

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