Shaky animation in IE Edge

Fix for shaky scale() animations in MS Edge

HTML

<div class="tiles">
  <a href="#/feeds">
    <div class="k-button tile">Feeds</div>
  </a>
  <a href="#/leads">
    <div class="k-button tile">Leads</div>
  </a>
</div>

CSS

.tiles {
  text-align: center;
  opacity: 1;
}

.tiles>a {
  font-size: 24px;
}

.tiles div:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* transform-origin: 50.01%; */ // shaky behaviour only appears when the transform-origin is set to 50%. A value slighly higher than that, like 50.01% seems to solve the problem.
  box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}

.tiles div {
  background-color: #4359A1;
  width: 200px;
  height: 180px;
  color: #ffffff;
  margin: 20px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}