angular-drag-and-drop-lists dragged element disappears (chrome)

I'm using the angular-drag-and-drop-lists package here to create a drag and drop list. However, the element being dragged always disappears. In all of the demos, you can see the dragged element as you move it around with your mouse. But I am unable to see this element in my implementation below.

<div class="list-item"
     ng-repeat="item in items | filter:query"
     dnd-draggable="column"
     dnd-moved="items.splice($index, 1)"
     dnd-effect-allowed="move"
     dnd-selected="models.selected = item"
     ng-class="{'selected': models.selected === item}"
     draggable="true"
     >
     <div class="icon">
         <span class="some-button"></span>
     </div>
     <div class="title">
         {{item.title}}
     </div>
</div>

I have set my css as follows:

.dndDragging:not(.dndDraggingSource) {
    display: block;
    background-color: red;
}
.dndDraggingSource {
    display: none;
}
.dndPlaceholder {
    background-color: #ddd;
}

I am able to see the placeholder, and I have verified that .dndDraggingSource {display: none} correctly makes the original element disappear. However, the element being dragged as identified by .dndDragging:not(.dndDraggingSource) will show up as a correctly-sized red block with no content.

What's going on behind the scenes on drag? Why does this dragged element show up correctly in the demo code? It seems that it is common to use a display: none on .dndDraggingSource, so I'm pretty sure there is another DOM element that's being dragged around. What is that DOM element and how can I inspect it? Based on behavior, I think there's another element being dragged around. But if you inspect the source code in angular-drag-and-drop-lists.js, the element.on('dragstart', function() {} block isn't doing anything to make a copy of the element tagged with .dndDraggingSource.

== Update ==

So, I realized that if you stuff some gibberish into the the div, it shows up. But neither the span nor the {{item.title}} does. Is there something you need to do with the data model to make this work?

Adding to this that apparently Chrome 50 has a bug with the ghosted copy that is displayed during dragging which can cause it to disappear. The issue and solution are outlined here: https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/256#issuecomment-231742499.

Personally, I solved it by adding the following:

ul[dnd-list] .dndDragging {
    transform:translateZ(0);
}