WebKit border radius and transition bug

问题

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?

回答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

回答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.

来源：https://stackoverflow.com/questions/20620441/webkit-border-radius-and-transition-bug