При перетаскивании позиция старого элемента остается выделенной (Chrome)

Question

Я использую библиотеку Rubaxa Sortable, однако все время в Chrome, а иногда и в FF я испытываю следующую проблему:

Когда я нажимаю и перетаскиваю этот div в Chrome, положение этого divостается выделенным, а не сам div, что вызывает путаницу.Например, если у меня есть список

DIV1 DIV2 DIV3

И я щелкаю и перетаскиваю DIV3 вверх, DIV2 переходит на предыдущее место DIV3 и, похоже, DIV2 подсвечивается.Это происходит постоянно в Chrome, а иногда и в FF.

Существует jsfiddle .

<script src="https://zeptojs.com/zepto.js"></script>
<script src="https://raw.githack.com/RubaXa/Sortable/master/Sortable.js"></script>
<div id="foo" class="boo">

    <div class="something1" id="1"><span>DIVA</span><span>1</span><span>2</span><span>3</span></div>
    <div class="something1" id="2"><span>DIVB</span><span>4</span><span>5</span><span>6</span></div>
    <div class="something1" id="3"><span>DIVC</span><span>7</span><span>8</span><span>9</span></div>
    <div class="something1" id="4"><span>DIVD</span><span>X</span><span>Y</span><icon>Z</icon></div>


</div>

<script>
var sortable = Sortable.create(foo, {
  group: 'foo',
  animation: 50,
  //forceFallback: true
});</script>

<style>
.something1 icon {
    visibility: hidden;
}

.something1:hover icon {
    visibility:visible;
}

#foo div:hover {
    background-color: rgba(50,50,140,0.25); 
}

#foo .sortable-ghost {
    background-color: rgba(50,50,140,0.25); 
}

#foo .sortable-fallback {
    background-color: rgba(50,50,140,0.25); 
}
</style>

Существует способ решить эту проблему, включив forceFallback: trueОднако анимация становится нестабильной и выглядит не очень хорошо.