On Safari, images tend to be blurry when zoomed in in the preview

[louisGRS]

Hi, I have a problem that is specific to Safari.
The problem is very simple: images tend to be blurry when zooming in on safari. This problem only affects the preview, not the final cropped image. Images look fine when zoomed in in Chrome and Firefox.

Step to reproduce

1. Download the image file provided at the bottom of this issue
2. Open this sandbox: https://codesandbox.io/p/sandbox/react-easy-crop-custom-image-demo-forked-ly5vr2?file=%2Fsrc%2Findex.js
3. Import the image
4. Zoom in
5. Compare the result between Safari and Chrome

Safari	Chrome

Investigations result

The level of added blur when compared to chrome can vary a lot based on the image quality and the screen resolution. In some situations, the difference between chrome and safari can be very small. In some other cases it's really big. The blur seems much worse with high resolution images.

Based on my investigations, the problem seems related to how safari handles CSS scaling transform.

I'm not sure that a workaround is possible, but I would like this to be at least listed as a known issue because it can be really problematic in some cases.

Thanks for your help !

You can use this image in the sandbox:

[ValentinH]

Thank you for taking the time to write such a detailed and clear issue.

This indeed seems to be a Safari specific buggy behavior. I found multiple threads related to that. It would be great to find a workaround that we could only apply to Safari.

In the meantime, I'm fine with adding a "known issues" section in the Readme. Do you want to take care of it?

[louisGRS]

My pleasure, I'm glad if it could help you. It would be nice to find a workaround but I'm not very optimistic.
I could take care of the new known issue entry in the Readme but not until the end of the week.