search

bokuweb / react-rnd

🖱 A resizable and draggable component for React.
https://bokuweb.github.io/react-rnd/stories
MIT License
3.96k stars 325 forks source link

Bug: Webcam/Screen-share video rendered inside Rnd disappears on safari when moved/resized #904

Open Liron-Toledo opened 1 year ago

Liron-Toledo commented 1 year ago

Bug

Browser Bug (Safari)

Overview of the problem

I'm using react-rnd version [10.4.1]

My browser is: Safari

I am sure this issue is not a duplicate? I think

Reproduced project

Re-created in a sandbox here: https://codesandbox.io/s/rnd-video-ios-bug-u0vqx9

Description

When streaming a webcam or sharing a screen to a video element and then rendering that video element inside the Rnd component, if on Safari, the video dissapears the moment the Rnd component is moved or resized.

Some interesting things to note:

Steps to Reproduce

  1. Be on Safari browser
  2. Render webcam or screen-share video element as child of Rnd component
  3. Set bounds field on Rnd component and move it (Triggers video disappearance)
  4. OR Resize Rnd component (Triggers video disappearance)

Expected behavior

Resizing or moving the Rnd component on safari shouldn't cause the video to disappear. (I.e how it behaves on chrome)

Actual behavior

Resizing or moving the Rnd component on safari causes video to disappear

i-am-anshul commented 1 year ago

@Liron-Toledo Did you find a solution/workaround for this? I am having the same problem on iPad safari. It was working fine on iOS 15 but is breaking on iOS 16+

Liron-Toledo commented 1 year ago

@Liron-Toledo Did you find a solution/workaround for this? I am having the same problem on iPad safari. It was working fine on iOS 15 but is breaking on iOS 16+

Hey @i-am-anshul sadly not. Ya I neglected to mention in the issue but this bug does seem to only trigger on IOS 16+. I was planning on maybe cloning the repo and digging into the code myself. Hopefully see what might be causing the issue but there's a lot on my plate at work right now so not sure when I'll be able to properly do that. Safari bugs are just the worst man :(

Liron-Toledo commented 1 year ago

For anyone that cares. I ended up having to replace Rnd with a custom component I made using react-draggable and react-resizable.

liyao1520 commented 1 year ago

Has anyone solved this problem? It's a really strange bug.

liyao1520 commented 1 year ago

For anyone that cares. I ended up having to replace Rnd with a custom component I made using react-draggable and react-resizable.

How to replace Rnd?