Chrome中的圆角不透明转换错误

Question

您好我刚刚发现了一个铬虫。

我有一个元素，里面有叠加层。 当我悬停它时，我希望叠加层用css淡入。

我这样做了： http://codepen.io/iamrane/pen/AraJF

但是如果你看一下铬，你可以看到我悬停它时边界半径消失了。 这是因为我褪色与不透明度。但是如果你改变不透明度：0到不透明度：1。你会看到圆角。所以css没错。

如果我想要淡入效果（请不要回答js），我怎么能解决这个问题呢？

Answer 1

将@include border-radius(10px);添加到.my-overlay可在Chrome中使用

.my-overlay {
    @include transition(opacity 0.2s ease);
    @include box-shadow(inset 0 0 10em 7em #000);
    @include border-radius(10px);
    opacity: 0; // Switch this to 1 to see that it works
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }