Crop Area incorrectly sized for objectFit='cover'

[crystaltine]

Hey, first of all thanks for making this! You guys really saved me a lot of time.

My issue comes up if you go to the Basic example with hooks, then perform the following steps:

1. Change the image prop inside the Cropper component to "https://placehold.co/400x20" (Line 16) - this isn't required, but it makes the bug a lot more visible.
2. Add objectFit='cover' somewhere in the props of the Cropper component
3. Refresh the Codesandbox previewer (NOT your own browser page, just the thing on the right of the Codesandbox editor)

This is the result when I do this:

The problem seems to be that the Crop area is incorrectly sized and unable to cover the entire image, even on least (x1) zoom. I'm encountering this error in my own project right now, but it just happens when the component that has a Cropper component is rendered visible.

However, I have found that updating Cropper by doing something like resizing the page a little bit (Ctrl + Scroll, etc.) seems to fix it, although obviously it would be best if it worked on load.

Thanks for reading and thanks again for maintaining this project!

[crystaltine]

Edit - I've been experimenting a little bit in my own project, and I think it may just be a visual bug - generating the cropped image using croppedAreaPixels and that stuff seems to produce the full-size, expected result.

[ValentinH]

Thanks for reporting this issue. I think I understand why, you can see the fix in #483.
I'm waiting for the codesandbox package to be published to ensure it does fix the issue.

[ValentinH]

Here's the fixed sandbox: https://codesandbox.io/s/react-easy-crop-xwncyw?file=/src/index.js

[github-actions]

🚀 Issue was fixed in v5.0.1 🚀