Clip doesn't always work in chrome

[opsb]

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).

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 the overflow: hidden to not be applied.