I'm using circle with clip to create rounded avatars. It appears that there's an optimisation in chrome that causes clip to not always work. I haven't been able to find a minimal case as whenever I simplify either the html or css the bug disappears. This is a rather lengthy example that you can use to see the issue though https://jsfiddle.net/6fnfh7p8/1/ (scroll down until you see the square image).
I'm using
circlewithclipto create rounded avatars. It appears that there's an optimisation in chrome that causes clip to not always work. I haven't been able to find a minimal case as whenever I simplify either the html or css the bug disappears. This is a rather lengthy example that you can use to see the issue though https://jsfiddle.net/6fnfh7p8/1/ (scroll down until you see the square image).One potential solution I came across (after reading https://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti) is to add a
z-index(the value isn't important) which seems to prevent chrome from applying whatever optimisation is causing theoverflow: hiddento not be applied.