WebKit边框半径和过渡效果的Bug

Question

在最新的Google Chrome稳定版中：版本号为31.0.1650.63 m（Canary也是如此），当存在边框半径和转换时仍然存在一个错误。 应用了边框半径的元素内部内容直到动画结束才被裁剪。 我已经通过过渡“top”和“left”属性而不是translateX / translateY来解决了这个问题。

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

然而，我似乎找不到一个替代透明度动画的方法。

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

是否有透明度的修复方法？

- Ivan V.

Answer 1

说实话，最简单的解决方案是为您的标题也提供 (稍小的) border-radius，像这样:

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

查看此修复的演示。

- egid

---

我已经尝试过了，但只有当字幕与边框颜色相同时才有效，而这并不总是情况。 - Ivan V.

Answer 2

您可以通过以下两种方式修复它：

  .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) 在内部元素中设置圆角

b) 设置背景颜色为透明并进行过渡

- vals

---

使用"background transparent"就可以解决问题了。 此外，在".caption"元素上设置边框半径是没有必要的。 http://codepen.io/iki_xx/pen/HIcEJ - Ivan V.