title: css3 transform: translatex(-100%); not working properly in IE11 & Edge
body: <p>The container <code>transform: translatex(-100%);</code> moving to <code>transform: translatex(0);</code> in Internet Explorer 11 and Edge not working properly. Content moves but it goes back when touch on mouse.</p>
  
  <pre><code>.widget {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
    border-radius: 4px;
    transition: all 1.5s;
    max-height: 400px;
    left: 0;
    transform: translatex(-100%);
  }
  .widget:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transform: translatex(0);
  }
  </code></pre>
  
  <p>Demo: <a href="https://codepen.io/anon/pen/MEMKKL" rel="nofollow noreferrer">https://codepen.io/anon/pen/MEMKKL</a></p>