WebKit border radius and transition bug

Question

In the latest stable release of Google Chrome: Version 31.0.1650.63 m (Canary also) there is still a bug when there is a border radius and transition involved. Content inside the element that has a border radius applied doesn't get clipped until the end of the animation.

I've managed to work it out by transitioning "top" and "left" properties instead of translateX / translateY

http://codepen.io/iki_xx/pen/wCFuo

However I can't seem to find a substitute for animating opacity.

http://codepen.io/iki_xx/pen/mspgE

Is there a fix for opacity?

Answer 1

You can fix it 2 ways:

  .thumb {
    position:relative;
    overflow: hidden;
    width:100%;
    border: 10px solid red;
    border-radius:55px;
    &:hover {

        .caption {
       background-color:red;
        }
      }
  }
  .caption {
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
       background-color:transparent;
        border-radius: 35px;
    @include transition(all 3s ease-in-out);
  }

a) setting border radius in the inner element

b) setting background-color: transparent and transitioning that

Answer 2

Honestly, the easiest solution is to also provide a (slightly smaller) border-radius for your caption, like so:

.caption {
    ...
    border-radius:30px;
}

See a demo of this fix.