On Safari, images tend to be blurry when zoomed in in the preview #520
Description
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
- Download the image file provided at the bottom of this issue
- Open this sandbox: https://codesandbox.io/p/sandbox/react-easy-crop-custom-image-demo-forked-ly5vr2?file=%2Fsrc%2Findex.js
- Import the image
- Zoom in
- 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:
