Microsoft Edge hover bug

Question

I have a bug in Microsoft Edge. <div> during hover has transform: scale(1.5); with transition: transform 1s;. But when you move cursor to div, wait 1s, move out and then fast move to div, div's scale is broken and transition disappear. Is there any way to fix this behavior? Here is fiddle.

div {
  background-color: green;
  transition: transform 1s;
  height: 100px;
  width: 100px;
}

div:hover {
  transform: scale(1.5);
}

<div></div>

Answer 1

To fix this transition problem on Edge use the transition-timing-function property, this will fix the problem by affecting the speeding making it slower on the start and the end. You can then set the animation length (in seconds) to make it to the original speed with transition-duration

div {
  background-color: green;
  transition: transform 1s;
  height: 100px;
  width: 100px;
}

div:hover {
  transform: scale(1.5);
  transition-timing-function: ease-in-out;
}

<div></div>

EDIT: If you notice carefully there's some kind of a glitch with the width changing on hover, but overall the transition is smooth on Edge