sekoyo/react-image-crop

Synchronization Issue Between Multiple Cropper Instances on the Same Page

kfs214 opened this issue · 2 comments

kfs214 commented

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

Screenshots

  • Safari (Functions correctly)
    Safari

  • chrome (Encounters an issue)
    chrome

sekoyo commented

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

  • 🚀1
kfs214 commented

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

And I also appreciate this great repository. 🚀

  • 👍1