Image border radius not working when not directly applied to the image?

[Silvan_Soeters1 (Silvan Soeters)]

So this is the second time I’m having this issue, and this time I really want to get it fixed because it’s for a client. It seems iOS is having some trouble displaying the border radius on an image when the border radius is applied to a parent div - not on the image itself.

My sisters Android phone was not having this issue and I thought I was going mad. The image should just get clipped when I set a border radius and overflow to hidden, right? Please see the attached screenshots and read only!

If someone has a solution please let me know. Thanks…

---

Here is my site Read-Only: LINK

[Silvan_Soeters1 (Silvan Soeters)]

I asked GPT4 and it provided me with a quick fix for this…:

-webkit-mask-image: -webkit-radial-gradient(white, black);

[chiggsy (Chinmay)]

Thanks so much for this, I had no idea what was going on. Can’t believe this is an issue, so annoying ffs.