Overflow issue using CSS3 transition

Question

I'm trying to do a small animation visible on the JsFiddle below.

But as you can see the border radius not work during the animation...

There is a fix for that?

Here is my code:

a {
    border-radius: 10px;
    display: inline-block;
    height: 300px;
    overflow: hidden;
}

a img {
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    width: 100%;
    height: 100%;
}

a:hover img {
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

Can you be more specific on "not working"? I tried it on Chrome 30 and Firefox 24 and didn't notice something wrong. — Passerby, Oct 09 '13 at 10:29
and it is up to date... on all machines here in office it doesn't work... it work fine on FF only... — Ayeye Brazo, Oct 09 '13 at 10:37

score 2 · Accepted Answer · edited May 23 '17 at 12:10

It is a long-standing bug in Webkit (see https://bugs.webkit.org/show_bug.cgi?id=68196) inherited by Chromium (see https://code.google.com/p/chromium/issues/detail?id=157218)

A workaround is posted in How to make CSS3 rounded corners hide overflow in Chrome/Opera

You basically need to set a CSS Mask on the container element

/*1x1 pixel black png*/
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Working demo at http://jsfiddle.net/V4V97/2/

Overflow issue using CSS3 transition

1 Answers1