Contenteditable element's cursor doesn't go back to original place when inserting new line and deleting

Issue

I have this simple html code:

span{
  outline: none;
}

hello
<span contenteditable="true">
  world
</span>

And I noticed that every time I press ENTER in the contenteditable span, the cursor goes to a new line as expected, but when pressing backspace the cursor doesn't go to it's original place, it moves more to the left + up, and only when pressing backspace again, it goes to the original place:

Is this a bug? Are there any workarounds?
Thanks

Solution

Finally, I have managed to trick the browser using ZeroWidthSpace character which always being inserted to the start of the element's innerHTML. As far as I understand, the bug(?) only occurs if there is no text in the element so inserting a 'non-text' character solved it.

Here's a snippet I made using custom Web Component that automatically fixes the problem:

class CeElement extends HTMLElement {
        constructor() {
            super();
        }
        connectedCallback(){
            this.addEventListener("input", function() {
                if(!this.innerHTML || this.innerHTML==0) {
                    this.innerHTML = "​";
                }
            }, false);
            this.innerHTML = "​" + this.innerHTML;
            this.contentEditable = true; 
        }
}
window.customElements.define('ce-element', CeElement);

ce-element{
  outline: none;
}

<span style="white-space: pre;">hello </span>  <! -- the span is only for the saving the space with 'white-space: pre;' -->
<ce-element>
world
</ce-element>

Answered By - ATP