javascript - 要素を範囲に挿入すると、Chrome で選択がクリアされます

Question

選択範囲の先頭にマーカーを挿入しようとしています (選択範囲の上に要素を配置するために使用します)。

行が実行されたときに選択がクリアされるChromeで奇妙なケースに遭遇していrange.insertNodeます:

$(document).on('mouseup', function (e) {
  var range = window.getSelection().getRangeAt(0).cloneRange();
  range.collapse(true);
  var markerElement = document.createElement("span");
  markerElement.appendChild(document.createTextNode("\ufeff"));
  // this will sometimes make the selection disappear in Chrome
  range.insertNode(markerElement);
  // make sure the marker is removed
  setTimeout(function(){
   markerElement.parentNode.removeChild(markerElement);
  }, 250);
});

jsbinこれを試すために使用できる例を次に示します: http://jsbin.com/agojib/1/edit

1 つの文字を選択すると、選択が解除されます。他の選択は問題ありません。

注:ユーザー テキスト選択の隣に要素を配置するにはどうすればよいですか?で提供されているコードを変更して使用しています。