Element appears outside of container on hover in Safari

HTML & CSS
1

I’m trying to make my own circular transition hover effect from scratch. I tried this before using a slightly different technique and it was Chrome acting up. I fixed it so now it works perfectly in every browser (that I need) except for Safari (mac)! The border radius just won’t mask what’s inside no matter what I try.

Here is a screenshot of what I see in Safari

Any ideas of a workaround, or if it’s not possible can anyone suggest some kind of fallback for just safari?

Thanks in advance :slight_smile:

2

It actually works fine for me in Safari 7.0.4. Older versions of Safari do seem to have issues with border-radius.

3

Can you post the version that worked everywhere except in Chrome?

4

Thanks for the replies.

I actually reverted to that version just now and it isn’t working in Safari either! So this one is progress…

Any ideas on how I could hack this just for older versions of Safari?