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