Rounded corners opacity transition bug in Chrome

Question

Hi I just found a chrome bug.

I have a element, with an overlay in it. When i hover it i want the overlay to fade in with css.

I've done it like this: http://codepen.io/iamrane/pen/AraJF

But if you look with chrome you can see that the border radius dissapear when i hover it. This is because im fading with opacity. But if you change opacity: 0 to opacity: 1. You'll see the rounded corners. So the css is not wrong.

How can i solve this is a different way if I want the fade in effect (no js answers please)

Answer 1

Adding @include border-radius(10px); to .my-overlay works in 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;
  }