css - Webkit border-radius and overflow bug when using any animation/transition

Question

I am having getting a weird bug when I use a combination of overflow, border-radius, and transition. I have a div with an img inside of it:

<a href="#" class="block size1 annualreport nonprofit">
    <div class="inner_block">
        <img src="http://i.imgur.com/8uuZB.jpg" />
    </div>
</a>

The div has a border-radius, and overflow is set to hidden:

body {background-color:#78735e;}

.block {
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
    margin: 6px;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
    overflow:hidden;
}
.size1 {
    width: 226px;
    height: 464px;
    min-width: 160px;
    max-width: 226px;
}
.inner_block {
    overflow: hidden;
    border-radius: 10px;
}
.block img {
    width: 100%;
    height: 100%;
    transition: all 0.1s;
}

.block img:hover { width:115%; height:115%; }

When I hover over the img I have a transition that takes place which makes the image larger to create a zooming effect. The problem is that the overflow seems to break on the bottom left and bottom right of the image.

I have created a JSFiddle for you to see what I'm talking about. http://jsfiddle.net/dmcgrew/HuMrC/1/

It works fine in Firefox, but breaks in Chrome and Safari.

Anyone know what might be causing this or how to fix it?

Answer 1

I had the same exact issue. Adding this to the parent container solved it for me (this is a LESS mixin).

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}