Событие Mouseleave неожиданно вызывается или срабатывает, когда элемент div анимируется (переход jQuery или CSS) в Chrome

Question

У меня есть выпадающее меню с анимационным содержимым внутри. Иногда во время любого случайного цикла анимации в Google Chrome срабатывает даже отпуск мышью (v69, Windows 10).

См. Скрипку: JSFiddle

$('#menu li').hover(
	function(event) {
  	$(this).find('.box').show();
  },
  function(event) {
		// current workaround
		if(event.target === $(this).find('.more-link')[0]){
    	console.log('Doing a return here would be a workaround but not the bugfix.');
      // return;
    }
  	$(this).find('.box').hide();
  }
);

$('.more-link')
	.unbind('click.more')
	.bind('click.more', function() {
    $moreLink = $(this);
  	$more = $moreLink.parent().find('.more');

    if ($more.is(':visible')) {
    	$moreLink.text('more...');
      $more.hide('blind', {}, 250);
    } else {
    	$moreLink.text('less...');
  		$more.show('blind', {}, 250);
    }
  });

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial;
  font-size: 10pt;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 20px;
}

ul {
  list-style-type: none;
  display: inline-block;
}

li {
  background-color: #efefef;
  border-right: 1px solid #cccccc;
  float: left;
  padding: 10px;
}

li:last-child {
  border-right: 0;
}

li:hover {
  background-color: tomato;
}

div.box {
  background-color: orange;
  border: 2px solid tomato;
  display: none;
  position: absolute;
  top: 76px;
  left: 40px;
  width: 300px;
  height: 200px;
  padding: 5px;
}

div.content {
  padding: 5px;
}

div.more {
  display: none;
  height: 100px;
  padding: 5px;
  background-color: yellow;
}

a.more-link {
  display: block;
  float: right;
  cursor: pointer;
  user-select:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<ul id="menu">
  <li>
    <a>Link 1</a>
    <div class="box">
      <a class="more-link">more...</a>
      <div class="content">Content 1</div>
      <div class="more">More content 1.</div>
    </div>
  </li>
  <li>
    <a>Link 2</a>
    <div class="box">
      <a class="more-link">more...</a>
      <div class="content">Content 2</div>
      <div class="more">More content 2.</div>
  </li>
  <li>
    <a>Link 3</a>
    <div class="box">
      <a class="more-link">more...</a>
      <div class="content">Content 3</div>
      <div class="more">More content 3.</div>
  </li>
</ul>

Действия по воспроизведению проблемы:

1. наведите курсор на любой элемент li
2. нажмите «больше ...» или «меньше ...»
3. повторите шаг 2 в быстрой последовательности
4. после случайного количества щелчков срабатывает событие mouseleave и поле исчезает

Следующие вещи, которые я обнаружил до сих пор:

• Чем быстрее анимация, тем реже возникает проблема
• Проблема возникает как при использовании метода анимации jQuery, так и при переходе через CSS
• без анимации не происходит
• Исправления CSS translate3d и backface-visibility у меня не работают

Заранее спасибо.