React-dnd: Ghost element displaying very inconsistently in Chrome 50

After updating Chrome to 50, most of the react-dnd draggable elements in our app are having ghost element problems, and I can't nail down what the root cause is (and don't have a public link to the admin of our app that I can make available). The initial behavior, that was working fine before, is that dragging an element showed a ghost element while the source element was hidden.

There are 6 different components of our app that are draggable using react-dnd. 2 of them are displaying ghosts just fine, 3 of them are showing no ghost at all, and 1 of them is somehow showing the element at the correct width/height but with no content and a white background.

Here is the list of clues I've found so far:

• All of the components are using a drag handle element with a parent element as the preview
• All of the components (except the one turning white) are adding an inline opacity:0 style to the preview element if monitor.isDragging() is true
• If I remove the conditional opacity:0 logic, I can see the ghosts, but the source element is aways visible, which isn't acceptable
• Here's a weird one. For 2 of the components, adding z-index:1 to them fixes it entirely. I can see the ghost and the source component is hidden. For the other 2 broken components this didn't fix the issue. And there was previously no z-index rule or any stacking issues on these components.
• That led me to thing that there might be some CSS combination leading the browser to think that the source component isn't visible at dragstart, and thus not creating the ghost. I've tried removing/changing all kinds of CSS values though and nothing.
• This was definitely working before updating Chrome to 50.