Range And Caret Position Doesn't Match

I noticed this problem in MS Edge, the caret position and range doesn't match up or wrong inside a content editable. In case if it is a hassle to open MS Edge, here's the snippet

Solution 1:

I've narrowed down the problem and the <span> is the root of all evil.

The spans text is wrapped inside a text element, in which you are navigating ([Object Text], check the startContainer property). After the last char, the text element ends, the span however does not. So you're now after the text element (index 0) and at the first index in the span. Other major browsers do not have this problem, because the text element continues after the last character. This is most likely an Edge bug.

Remove the span to solve the problem.