Cannot drag a video element inside of a Draggable

Hello, react-draggable maintainers! I think your package is lovely, and we use it for a video call interface in which we have a draggable “video panel” that can be moved around the screen.

However, ever since updating to Chrome 78, we’ve noticed that <video> tags inside of a Draggable are not being dragged correctly.

Here’s a GIF of the behavior I’m seeing – in green, you can see a “normal” draggable div without a video tag inside. That one works fine. In the black box, there’s a draggable div with a video, fed by the getUserMedia API. This one, you can see that I have trouble dragging.

Operating system: OSX Mojave / 10.14.6 Browser version: Version 78.0.3904.70 react-draggable version: Originally noticed on 3.3.2, but was able to reproduce with 4.1.0 as well

I wasn’t able to reproduce this behavior on Firefox or in Chrome 77, so I think it might be something recently broken by the latest Chrome update. It used to to work!

Here is a simple reproduction: https://codesandbox.io/embed/elated-goldwasser-4pogf

[chaitanyapandit]

I was able to reproduce this issue and for me setting my wrapped element’s position to fixed instead of absolute did the trick.

[STRML]

Can replicate this… indeed it is a new bug in Chrome 78. Pretty weird! Will have to take some time to deep-dive into the diff from 77.