Chrome中的圓角不透明轉換錯誤

Question

嗨，我剛剛發現了一個鉻錯誤。

我有一個元素，其中有一個覆蓋層。 當我徘徊它時，我想疊加與CSS淡入。

我已經做了這樣的： http://codepen.io/iamrane/pen/AraJF

但是如果你使用Chrome看起來你可以看到，圓角半徑dissapear當我將鼠標懸停它。 這是因爲im不透明。但是，如果將不透明度更改爲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; 
    }