IE11 - border radius and shadow box cause problems together

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>

Run codeHide result

It works on Chrome, Safari and Firefox, but it doesn’t work very well in Internet Explorer 11, there are obvious visual problems when the div no longer focuses. How to solve them?

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

Answer 1

Updated to make it a little better.

As per your request from the comment, this is a workaround to use :afteror :beforefor your 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>

Run codeHide result

jsfiddle

This works fine in IE 11.