Cannot drag a video element inside of a Draggable

[menewman]

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

[Redmega]

The same thing happens with a canvas target of PIXI.JS, as a child of Draggable.

I can't share screenshot from that example, I will have to recreate it on codesandbox later, but almost the exact same problem as the video issue occurs.

If you really mess around with it, it almost seems like the video element struggles to get updated and just lags behind a few cycles. Sometimes freezing, and then suddenly catching up as the draggable is moved around more.

When you attempt to inspect element (or do anything else to cause the DOM to update) the child element (video, in your case) snaps back into place.

[menewman]

Small update: I couldn't really figure out a way around this react-draggable/Chrome issue, so I ended up writing a replacement for our "drag around" functionality using react-dnd. The video-drag issue looked really bad in our app, so we couldn't leave it in prod like that while waiting for a fix.

However, I think that's regrettable because react-draggable has a very clean, simple API for this purpose! So, I'll stay tuned for any news of a fix.

[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.

[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.

[Redmega]

Can confirm that changing the element to fixed actually does seem to alleviate this. Very odd!

Does not help the example codesandbox though -- there is no positioning set, so I don't think that's desired for a default use-case like that.

[menewman]

Thanks for the tip, @chaitanyapandit !

@Redmega - It actually does seem to help the example CodeSandbox in the sense that you can add a fixed position style like this (modifying index.js):

        <Draggable bounds="parent">
          <div
            style={{
              width: "256px",
              padding: "8px",
              backgroundColor: "blue",
              position: "fixed",
            }}
          >
            <VideoStream height={180} width={240} stream={this.state.stream} />
          </div>
        </Draggable>

...and as far as I can tell, it does make everything work okay. I still don't really understand why, but good to know there is a workaround here.

(I do agree that it's not desirable to have to do this as a manual fix/workaround.)

[asafron]

Maybe it worth mentioning to others - happened to me as well, but with react-virtualized elements, inside my component. Setting parent position to "fixed", solved the issue.

[sankarnarayanansr]

Don't set bounds to parents try giving const Val.