getBoundingClientRect 在 Safari 中為頂部、左側、右側、底部返回 0

Question

所以，我有一個由 Facebook 的draft-js提供支持的 contenteditable div。 我需要獲得該 div 中插入符號的視覺位置，我實現了這個（在 Firefox 和 Chrome 中有效）：

const selection = window.getSelection && window.getSelection();
if (selection.rangeCount > 0) {
    const coordinates = selection.getRangeAt(0).getBoundingClientRect();
}

在 Chrome 和 Firefox 的情況下，我得到正確的坐標。 但是，在 Firefox 中，我的所有位置屬性都為 0。 任何解決方法/跨瀏覽器的解決方案？

Answer 1

似乎我已經使用下一個代碼解決了這些問題：

let range = window.getSelection().getRangeAt(0);
range = range.cloneRange();
range.setStart(range.startContainer, 0);
range.getBoundingClientRect();

這是小提琴。

2020 年 2 月 13 日更新：

當輸入是多行時，這里更新了第一行固定插入符號位置的小提琴。