CSS縮放破壞了Microsoft Edge中的caretRangeFromPoint

Question

在Edge中更改文檔的body元素上的CSS縮放級別時，caretRangeFromPoint返回的范圍不正確。

 document.getElementsByTagName("body")[0].style.zoom = 1.5; window.onclick = function(e) { var caretPos = document.caretRangeFromPoint(e.clientX, e.clientY); var obj = document.createElement('span'); obj.style.cssText = 'background: #0c0;display: inline-block;height: 1em;width:1em;'; if (caretPos) caretPos.insertNode(obj); }; 

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

JSFiddle：

https://jsfiddle.net/Aw9aV/292/

在<p>元素內單擊以查看問題所在。 跨度未插入單擊的位置。

更新資料

我就此問題與Microsoft聯系。 他們仍在調查中，但初步發現表明這可能是Edge中的錯誤。 聯系人通知我，他無法在Windows的RS5更新中復制它。 我現在正在等待有關如何在Webview控件中解決此問題的更多信息。

Answer 1

我的系統中沒有Edge（使用Ubuntu），我認為來自MDN的這段代碼可能會有所幫助

 function insertBreakAtPoint(e) {    var range;    var textNode;    var offset;    if (document.caretPositionFromPoint) {        range = document.caretPositionFromPoint(e.clientX, e.clientY);        textNode = range.offsetNode;        offset = range.offset;            } else if (document.caretRangeFromPoint) {        range = document.caretRangeFromPoint(e.clientX, e.clientY);        textNode = range.startContainer;        offset = range.startOffset;    }    // only split TEXT_NODEs    if (textNode && textNode.nodeType == 3) {        var replacement = textNode.splitText(offset);         var br = document.createElement('span'); br.style.cssText = 'background: #0c0;display: inline-block;height: 1em;width:1em;';        textNode.parentNode.insertBefore(br, replacement);    } } var paragraphs = document.getElementsByTagName("p"); for (i=0 ; i < paragraphs.length; i++) {    paragraphs[i].addEventListener("click", insertBreakAtPoint, false); } 

欲了解更多信息，請訪問這里我也創建了一個小提琴這里請讓我知道你關心