Typing over span adds phantom background-color style

Question

JSFiddle: http://jsfiddle.net/p7ph5vfj/

My question is: Can anyone suggest a workaround to this chrome specific bug? My problem is not that the letter X is highlighted, it is that it loses the .foo class and so I can't find it anymore. I would be fine with either the .foo class staying put OR if the background color goes away. I don't even know how to debug this as DOM breakpoints don't fire when this happens.

<div contenteditable="true">
    DO NOT REPLACE. <span class="foo">END a b c</span> d START la la
</div>

and the CSS looks like this:

.foo {
    background-color: #ff0000;
}

The steps to trigger the bug on chrome are:

• Take your mouse, place the cursor next to the word START

• Click and hold to select text, go to the LEFT and finish the selection at the word END.

• The selection should cover the following text exactly: "END a b c d START". Again, the selection has to be from right to left.

• Type a new character on your keyboard, like 'X'

• If X is highlighted in red, you have triggered the bug.

The bug in particular is that the HTML now looks like this:

<div contenteditable="true">
    DO NOT REPLACE. <span style="background-color: rgb(255, 0, 0);">X</span>&nbsp;la la
</div>

Where did the .foo class go and where did this background-color style come from? Adding DOM breakpoints to either the div or the span do not fire when this happens.

Answer 1

I know it's not really clean code, but if you wrap your span.foo with another span, the problem seems to be fixed.

<div contenteditable="true"> DO NOT REPLACE. <span><span class="foo">END a b c</span></span> d START la la </div>