1

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?

http://jsfiddle.net/toroncino/V4V97/

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);
}
4
  • Can you be more specific on "not working"? I tried it on Chrome 30 and Firefox 24 and didn't notice something wrong. Commented Oct 9, 2013 at 10:29
  • border radius vanish during animation... Commented Oct 9, 2013 at 10:29
  • Huh, doesn't happen to me. What browser are you using? Commented Oct 9, 2013 at 10:30
  • and it is up to date... on all machines here in office it doesn't work... it work fine on FF only... Commented Oct 9, 2013 at 10:37

1 Answer 1

2

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/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.