Gap in Cropper component on first launch

[hi-im-haz3l]

Describe the bug
I followed the example over at https://codesandbox.io/s/y09komm059. Everything seems to work great, except on initial load, the crop window leaves visible gaps on each side (despite scrolling and zooming all the way out). However, the strange thing is that the output image doesn't show gaps like the Cropper component.
Cropper returns to normal only after I'm sliding the rotate slider, and, voila, it snaps to 200px again :)

Is there some styling I'm missing or some ref I need to forward?

My project is desperately in need of a refactor, so here is a screenshot:
https://i.imgur.com/4xnvRR3_d.webp?maxwidth=760&fidelity=grand

Like the example, I set Cropper's container height to 200px, but on initial load (without rotating it with the rotate slider), Cropper's height is set to 190px for some strange reason:
https://i.imgur.com/LptVWZ2_d.webp?maxwidth=760&fidelity=grand

I'll try my best to make a sandbox to reproduce the bug, but it gonna take a while :)

I also use Nextjs & chakra-ui.

[ValentinH]

Thanks for the detailed issue.
Unfortunately, without a codesandbox showing the issue I could play with, I could only provide guesses to what could be wrong. I don't have any at the moment though.

[hi-im-haz3l]

Thanks for the quick reply. Very much appreciate it 👍

After struggling to install chakra on Codesandbox for a while, I manage to recreate the bug over at:
https://codesandbox.io/s/beautiful-jackson-35qj5d?file=/components/preview-card.js

To add an image, click on the question mark box at the top. It'll prompt a modal with the slider.

Please let me know if I can do something to help!

[ValentinH]

This is due to the Modal being animated while opening.
If you turn off the animation, it works: https://codesandbox.io/s/quirky-dan-hjo69o?file=/components/canvas-modal.js

If you really want to keep the animation, then the trick would be to not render the Cropper until the modal is open and done animating. What you could do is to display a placeholder such as the plain image while the modal is opening.

[hi-im-haz3l]

You're spot on! Setting motionPreset to either slideInBottom, slideInRight, or none (but not scale for some reason) work great 👍

Thank you so much! Cheer