Safari 的 getBoundingClientRect() 實現返回不正確的頂部

Question

我有一個帶有float: right的div ，我正在嘗試獲取它與視口頂部的距離。 在除 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

您可以嘗試等待 fonts 就緒全局 promise：

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