Drag and drop on firefox is glitchy.

On firefox when I try to drag and drop items after dragging for a few pixels the cursor changes to crossed out circle and the drag stops. When I let go of the mouse button I am dragging the item again and clicking releases the drag and drops the item.
here is a video:
https://youtu.be/q1h9SO59GTU

On chrome everything works the way I would expect.
here is a video:
https://youtu.be/Aijcz_HJOyc

Here is my setup code.

```
const styles = theme => ({
grid: {
width: 208,
marginLeft: 'auto',
marginRight: 'auto',
'@media (min-width: 500px)': {
width: 'calc(100% + 16px)',
margin: -8,
paddingRight: 20,
paddingLeft: 20,
},
},
sortableHelper: {
zIndex: 3000,
},
sortableItem: {
margin: 8,
width: 192,
height: 256,
display: 'inline-block',
},
sortableContainer: {
margin: 0,
marginTop: -8,
padding: 0,
}
});

const SortableItem = SortableElement(({value, classes}) =>

const SortableList = SortableContainer(({items, classes}) => {
return (

{ items.map((route, index) => (

))}

class BoulderRouteGrid extends React.Component {
render() {
const classes = this.props.classes;
return ( {this.props.onRouteMoved(oldIndex, newIndex)}} />)
}
}

export default withStyles(styles)(BoulderRouteGrid);
```

The one thing somewhat unique is that the scrollable container is inside a material UI Dialog.