Background image not filling the area in modal about react-advanced-cropper

[Norserium]

@junaid1840, well, the problem is that the cropper doesn't work correctly when you apply to the parent container the scale transformation.

That's because the cropper uses getBoundingClientRect under the hood to get the boundary size instead of clientWidth and clientHeight. That was needed to get the better subpixel precision required by the preview component.

Unfortunately, Chakra UI doesn't provide onOpened prop, that will be called, when the transition is completed. That would give you the possibility to display the cropper when the modal is finally opened or the possibility to call refresh() method to update the cropper like it's updating on window resize.

What can I offer you in this situtation?

1. Change the transition animation from "scale" to something else.
2. Try to process onTransitionEnd callback by himself and detect when the modal is finally opened, but be careful, there will be a lot of that events. It should solve your issue.
3. This cropper is incredible flex and you can redefine the boundary size calculation that causes this issue initially. The example for the latest (it's important) version.

[Norserium]

@junaid1840, that's the serious bug.

1. The current hypothesis, that the modal window size is changed after the cropper was initialized. Try to resize the window after the modal was opened.
2. Try to place the cropper outside the modal window and the reproduce bug. If it's reproducing, send me the used image.

[junaid1840]

@Norserium You are absolutely correct. Thanks

1. Resizing the window does fix the issue.
2. Yes it is working fine outside the modal.

Any solution for dynamic width setting or maybe lazy loading the cropper ?

[Norserium]

@junaid1840, what's library do you use for the modal window? Why does it change the size when it's openning?

[junaid1840]

@Norserium I'm using Chakra UI and tailwind for styling.
https://chakra-ui.com/
https://tailwindcss.com/

[Norserium]

@junaid1840, I close issue. Feel free to reopen it if the advice above didn't help you.