Click and resize not working on Chrome installed on Ubuntu Virtual Box VM

[bemineni]

Describe the bug
I have been working on react project for the some time and I started using React cropper. The functionality was working fine a month back. My development enironment is on Linux Mint installed on Virtual Box(6.1.30) and the Chrome version I am using is 96.0.4664.45 (Official Build) (64-bit). Yesterday I noticed that I cannot move the image or resize the crop area on chrome. I tested the same on Firefox on the same Linux mint virtual machine and its works fine. I am not sure which update caused this issue, Virtual Box or Chrome

The same issue shows up on https://fengyuanchen.github.io/cropperjs/ demo link

I dont see the issue on chrome on my host Windows desktop. Installed a new Ubuntu VM and I see the same issue on chrome.

Other options I tried

1. Installed new version of the chrome on Liniux Mint 96.0.4664.110 (Official Build) (64-bit)
2. Updated Virtual box Guest addional tools

I am not sure where the is the problem, is it with Chrome, Virtual box or the Debian based OS

To Reproduce
Steps to reproduce the behavior:

1. Install Virtual box
2. Install Ubuntu 20.04 or Linux Mint
3. Install Chrome
4. Open https://fengyuanchen.github.io/cropperjs/
5. Try to resize the crop area.

Expected behavior
Should be able to move the image or resize the crop area.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux Mint, Ubuntu
• Browser Chrome
• Version 96.0.4664.45 also 96.0.4664.110

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[bemineni]

@fengyuanchen Can you please provide your comments on this issue ?

[fengyuanchen]

It is difficult for me to reproduce your working environment, you may need to debug it yourself.

[bemineni]

This doesn't need my environment

1. Download publicly available VirtualBox and install on Windows OS
2. Install publicly available Ubuntu 20.4 on the Virtual Box VM
3. Install latest Chrome version on Ubuntu
4. Open your demo website https://fengyuanchen.github.io/cropperjs/
5. Try to resize the crop area

This seems to be a problem with VirtualBox

I have moved on to VMware workstation.

[hamedpro]

I have the same issue on ubuntu 22.04.1 installed inside a virtual box inside windows 10. this website mentioned is working good in chrome on host machine (windows 10) and also in firefox inside the virtual ubuntu but not in the latest chrome inside the virtual box (Version 104.0.5112.79 (Official Build) (64-bit))

[colinstantos]

This still happens on virtual box, the issue seems to always happen when the mouse is not fully captured by virtualbox. Tried some chrome extensions that take area screenshots just to see if it's a more general issue or not, and it seems that for those extensions it works.

Also if the mouse is captured by VB it works correctly(as in you need to press the host-key to realase the mouse from the box). I am using this library for a software that will be mostly used inside VB sadly and would appreciate a fix/workaround/suggestion anything really :)

Tried also the demo for v2 and the issue is the same