getBoundingClientRect는 Safari의 위쪽, 왼쪽, 오른쪽, 아래쪽에 대해 0을 반환합니다.

Question

그래서 Facebook의 draft-js에 기반한 contenteditable div가 있습니다. 그 DIV 내부 캐럿의 시각적 인 위치를 얻을 필요, 나는 (파이어 폭스와 크롬에서 작동하는)이 구현 :

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

내가 크롬과 파이어 폭스의 경우 정확한 좌표를 얻는다. 그러나 Firefox에서는 모든 위치 속성에 대해 0이 표시됩니다. 이것에 대한 모든 해결 방법/크로스 브라우저 솔루션?

Answer 1

내가 다음 코드를 사용하여 문제를 해결 한 것 같다 :

여기

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

가 fiddle입니다.