Circular crop area, without overflow

[vincentritter]

Hey there,

Just wondering if it’s possible to set a circular crop area without showing the image overflow?

Here is my circular image:

I’m trying not to show the overflow and just keep it all circular. Is this at all possible?

In the above screenshot you can see a circular sticker (which is an SVG) and on top I have the Cropper.

Have been trying to override the default styles with border-radius: 50% and overflow: hidden, but no luck as of yet.

Any help or pointers appreciated.

— Vincent

[ValentinH]

I think this is possible by changing the opacity of the dark part of the crop area: https://github.com/ricardo-ch/react-easy-crop/blob/main/src/styles.css#L48

[vincentritter]

Thanks for this.

I did try exactly that. However my problem is that there is going to be writing inside the red circle… so I won’t be able to just change the colour of it (to hide the overflow of the image).

I’ll play around with it a little more today. Will respond back if I find a solution. Feel free to let me know any other areas I could look at.

Perhaps this is a browser specific issue — so I’ll check.

[ValentinH]

If you manage to setup a codesandbox with what you are trying, it would be easier for me to help 🙂

[vincentritter]

Alrighty, I’ll see what I can do.

It’s actually a pretty complicated project… so cherry picking might take me longer haha.

Thanks so far anyway ✌️

[vincentritter]

Thank you Valentin.

Can confirm this is actually a browser issue within Safari (v15) 🙄. For some reason it’s not applying the border-radius of 50% and/or overflow hidden.

Brave & Firefox have the expected result and works a treat there!

[vincentritter]

This was an issue with Safari 15 (Webkit). There is a bug where an outer container of position: absolute doesn’t apply a overflow: hidden with a border-radius: 50%.

No other browser engine seems to encounter that.

I fixed this by adding a secondary div inside the absolute positioned container and applying position: sticky plus the above mentioned styles — not great, but it fixed the issue.

Thanks for all the help ✌️