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

[Liron-Toledo]

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:

• Found that removing the 'bounds' field stops movement from triggering video disappearance
• Not setting the 'size' field stops video from disappearing on resize start but NOT resize stop

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]

@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]

@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]

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

[liyao1520]

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

[liyao1520]

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?