после range.setStart новые символы появляются в предыдущем узле

Question

это происходит в chrome (71.0.3578.80 в windows):

в range.setStart каретка перемещается в опорный узел, но после ввода новых символов появляются в узле раньше, когда смещение равно 0.

Ожидается, что символы появятся в ссылочном узле range.setStart.

см. Здесь:

http://jsfiddle.net/pgrds9qv/

function setCaret() {
  var el = document.getElementById("editable");
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(el.childNodes[2], 0);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
}

div {
  padding: 10px;
}

span {
  border: 1px solid black;
  font-size: 120%;
  padding: 5px;
}

<div id="editable" contenteditable="true">
  <span>first </span><span>second </span><span>third </span>
</div>
<div>
  <button id="button" onclick="setCaret()">focus</button>
</div>

в Firefox работает нормально.как получить такое же поведение в хроме?или есть альтернативный способ достижения этого?Большое спасибо за любые подсказки!