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 日更新：

当输入是多行时，这里更新了第一行固定插入符号位置的小提琴。