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

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/