CSS缩放中断Microsoft Edge中的插入符号RangeFromPoint

Question

在Edge中更改文档主体元素的CSS缩放级别时，插入符号RangeFromPoint返回的范围不正确。

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);
}

有关更多信息，请访问此处我也在这里创建了一个小提琴，请检查并让我知道你关心