Synchronization Issue Between Multiple Cropper Instances on the Same Page

[kfs214]

Synchronization Issue Between Multiple Cropper Instances on the Same Page

Environment

• OS: MacOS Ventura 13.4.1
• Browsers:
  • Safari: Functions correctly
  • Chrome: Encounters an issue

Issue Description

On a single page of my application, there are multiple cropper instances, each intended to have its unique selection area. However, changes in the first instance unintentionally affect others.

Problem Analysis

The issue originates from identical IDs assigned to the mask elements (hole). This causes all instances to refer to the same mask, disrupting their individual functionalities.

CodeSandBox

• View the issue demonstration in this CodeSandBox

Screenshots

• Safari (Functions correctly)
  

• chrome (Encounters an issue)
  

[sekoyo]

Thanks for the detail and finding the cause 🙏 Please try 11.0.2

[kfs214]

Thank you for your quick response!
The problem has been resolved.

And I also appreciate this great repository. 🚀