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. The div has a border radius and overflow set to hidden. 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?

question from:https://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition

Answer 1

I don't know if I'm understanding the problem correctly as the image isn't loading. If you add height: 100%; to .inner_block does it help your issue?

http://jsfiddle.net/HuMrC/2/