title: Typing over span adds phantom background-color style
body: <p>JSFiddle: <a href="http://jsfiddle.net/p7ph5vfj/" rel="nofollow">http://jsfiddle.net/p7ph5vfj/</a></p>
  
  <p>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.</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      DO NOT REPLACE. &lt;span class="foo"&gt;END a b c&lt;/span&gt; d START la la
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS looks like this:</p>
  
  <pre><code>.foo {
      background-color: #ff0000;
  }
  </code></pre>
  
  <p>The steps to trigger the bug on chrome are:</p>
  
  <ul>
  <li><p>Take your mouse, place the cursor next to the word START</p></li>
  <li><p>Click and hold to select text, go to the LEFT and finish the selection at the word END.</p></li>
  <li><p>The selection should cover the following text exactly: "END a b c d START". Again, the selection has to be from right to left.</p></li>
  <li><p>Type a new character on your keyboard, like 'X'</p></li>
  <li><p>If X is highlighted in red, you have triggered the bug.</p></li>
  </ul>
  
  <p>The bug in particular is that the HTML now looks like this:</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      DO NOT REPLACE. &lt;span style="background-color: rgb(255, 0, 0);"&gt;X&lt;/span&gt;&amp;nbsp;la la
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>