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?

Solution 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/

Solution 2

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

Solution 3

I added minus z-index value for image and higher value for parent

li {z-index:10; overflow: hidden;}

li img {z-index: -10;}

Solution 4

I have faced this issue on Safari(It's a known bug in safari); fixed it by applying -webkit-mask-image and it works for me perfectly. cheers

.block {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

Solution 5

The accepted answer didn't work for me because I can't have the clear border increasing the clickable area of the masked element, nor do I want it to obscure that of other elements (and setting the height to 100% didn't solve the issue).

See my answer to a related question for a possible solution.

View more solutions