Inconsistent canvas output in Safari vs Chrome when using unrestricted cropping

[debotos]

With imageRestriction={ImageRestriction.none}, the cropped image output (from getCanvas().toDataURL()) appears correctly in Chrome, but is incorrect in Safari.

In Safari, the cropped result is misaligned or zoomed incorrectly, even though the preview inside the Cropper looks fine during interaction.

This issue disappears if imageRestriction is removed or set to ImageRestriction.stencil or fitArea, but that disables the ability to pan or freely move the image — which is a required use case.

Steps to Reproduce

• Set up a Cropper with imageRestriction={ImageRestriction.none}, stencilProps={{ aspectRatio: 1.66666 }} and a base64 image.
• Crop the image in Chrome — output is as expected.
• Perform the same steps in Safari — output is incorrect (shifted or zoomed).
• Changing imageRestriction to another value (e.g., stencil) fixes the issue.

Environment

• Browser: Safari (latest, tested on macOS)
• Library Version: react-advanced-cropper@^0.20.1
• Image Source: base64/Image File/URL

Expected Behavior

The cropped result should match the visible cropping area, regardless of browser or imageRestriction setting.

Actual Behavior

In Safari, the final cropped image is shifted, or cut off from bottom right side — despite appearing correctly in the Cropper UI.

Link To Test

https://d2cmcr.csb.app/

Main Code Portion

<Cropper
  ref={cropperRef}
  src={base64/File Blob/URL}
  imageRestriction={ImageRestriction.none}
  stencilProps={{ aspectRatio: 1.66666 }}
/>

/* Save */
const cropper = cropperRef.current
if (!cropper) return

const canvas = cropper.getCanvas({ fillColor: color })
const result = canvas?.toDataURL() // <-- This result is different. Chrome gives correct output but output from Safari is cut off

Attaching Image as Zip file.

item.jpg.zip