IE11 - border-radius and box-shadow together cause problems

Question

Following my Code:

 div{ display: block; width: 500px; height: 200px; border: 1px solid black; border-radius: 5px; transition: box-shadow 1s; } div:hover{ box-shadow: 25px 25px 0px #000; } 

 <div>Test</div> 

It works on Chrome, Safari and Firefox but it does not work well on Internet Explorer 11, there are obvious visual problems when the div is no longer focus. How to solve them?

JSFiddle: https://jsfiddle.net/aL0t8g21/

Answer 1

Updated to make it little Better.

As per your request from comment, here is a workaround for you using :after or :before of you div.

 div { display: block; width: 500px; height: 200px; border: 1px solid black; border-radius: 5px; transition: box-shadow 1s; position: relative; background: #fff; } div:after { content: ''; display: block; position: absolute; width: 500px; height: 200px; border-radius: 5px; background: #000; left: 0; top: 0; opacity: 0; transition: all 1s ease-in-out; z-index: -1; } div:hover:after { left: 25px; top: 25px; opacity: 1; } 

 <div>Test</div> 

jsfiddle

This is working fine in IE 11.