There is a bug in Safari when using border-radius and overflow: hidden. Especially when applying transform to a child.
In this case, overflow: hidden does not always work. The child ignores the border radius and overflows.
It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.
There are some workaround. We need to place the element with the overflow attribute into a stacking context.
I've tested the following workarounds on the latest version of iOS (14.4).
You can choose what you want. But you should search the web for the particular attribute. (e.g. will-change should be rarely used. See docs)
Use this on the element with overflow: hidden and border-radius:
z-index: 0;
/* Or another value. */
/* The position may need to be set to e.g. relative or absolute. */or
transform: translateZ(0);
/* Or translate3d(0, 0, 0) or other values. */or
mask-image: radial-gradient(white, black);
/* Maybe: -webkit-mask-image: -webkit-radial-gradient(white, black); */or
will-change: transform;
/* Read the docs first. Apparently it should be used carefully. */Let me know if this fixed your problem or not.
Personally, I use transform or z-index. These are probably the most harmless properties.
But feel free to post your opinion and other great solutions.
Nice and Detail workaround, appreciate your effort and hope Apple would some how fix it in the future.