fengyuanchen/cropperjs

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

Open

#898 opened on Dec 18, 2021

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (12,111 stars) (2,388 forks)batch import
help wanted

Description

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.

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
VirtualBox VMUbuntu/LinuxChrome browserJavaScript debugging
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the difference in pointer events between Chrome on Ubuntu VM and other environments. Check the cropperjs event handling code, particularly in src/js/cropper.js or related files. Reproduce the issue in a similar VM setup and debug the event listeners. Look for any recent Chrome updates that may have changed behavior.