ember-sortable animation glitch

controllers.application\.js

import Controller from '@ember/controller';

export default Controller.extend({
  init() {
    this._super(...arguments);
    this.set('items', [
      'Adenosine',
      'Cytosine',
      'Guanine',
      'Thymidine',
    ]);
  },

  actions: {
    update(items) {
      this.set('items', items);
    },
  },
});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.sortable-list {
  padding-left: 0;
}

.sortable-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  transition: all 300ms;
}

.sortable-item.is-dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  transition-duration: 0s;
  z-index: 10;
}

.sortable-item.is-dropping {
  z-index: 10;
/*  uncomment below to dislabe transition and avoid some of the glitches  */
/*   transition-duration: 0s; */
}

templates.application\.hbs

<p>Try drag an item (e.g. Thymidine) on top of another (e.g. Guanine) and release mouse before moving across it.</p>

{{#sortable-group
  model=items
  onChange=(action "update")
  class="sortable-list"
  as |group|
}}
  {{#each group.model as |item|}}
    {{#group.item model=item tabindex="0"}}
      {{item}}
    {{/group.item}}
  {{/each}}
{{/sortable-group}}

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-sortable": "2.1.3"
  }
}