Google Chrome Border Radius issue

Question

Hi there I am working on this site - http://smudgedigital.com/animation-projects/ and have an issue with the gallery on the projects page. The images should all be a circle and when rolled over the the image should remain a circle and have a hover black state.

However despite the site working fine I have recently noticed that the circles are no longer circles in google chrome. The are in fact square on all states.

I have looked through this site to find any answers but none of them seem to work. I have tried using the border radius code for all browsers;

-webkit-border-radius: 100%; 
-moz-border-radius: 100%; 
border-radius: 100%;

but it does not seem to pick it up, even when I use the !important tag. I have also tried using pixels instead of percent. When I use the inspect element tool I can add this;

.view img {
display: block;
position: relative;
border-radius: 100%;
}

and it works on the normal state, but when I put it into my site css it does not appear.

I have seen some people say that google just doesnt understand the overflow: hidden property and it has nothing to do with the border radius, however overflow: hidden does appear.

Any help would be greatly appreciated. I have built the site on wordpress.

Thanks,

Answer 1

Added

.view-first img {
    transition: all 0.2s linear;
    border-radius: 100%; /* added new */
}

removed

.view{
    overflow:hidden; /* removed */
}

Answer 2

This looks to be a known bug in Chrome I'm afraid. It's related to transition mainly, and how the order of parent/child becomes when the DOM is being painted during a transition:

https://code.google.com/p/chromium/issues/detail?id=157218

As an alternative you could maybe make the entire circle including border and shadow increase in size. However I don't think that is the effect you want.

Please also see this thread on Stack Overflow: Bug with transform: scale and overflow: hidden in Chrome