title: CSS3 image scale transition issue in IE11
body: <p>This code works fine in Chrome/Firefox/Safari/Opera on Mac OS X (<a href="http://jsfiddle.net/hfmhecmw/3/" rel="nofollow noreferrer">http://jsfiddle.net/hfmhecmw/3/</a>):</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;img class="image" src="http://s29.postimg.org/fu0492g7r/lotus_flowers_wallpaper_hd_25.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.container {
      display: inline-block;
      width: 320px;
      height: 200px;
      overflow: hidden;
  }
  
  .image {
      width: 320px;
      height: 200px;
      -webkit-transition: -webkit-transform 0.4s;
      transition: transform 0.4s;
  }
  
  .container:hover .image {
      -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
      transform: scale(1.15);
  }
  </code></pre>
  
  <p>But there is an issue: Windows 8.1/IE11 while image's scaling, it are: blurred, moved left on 1px and have something like 1px border around.</p>
  
  <p><img src="https://i.stack.imgur.com/g81mk.png" alt="Picture in normal state">
  <img src="https://i.stack.imgur.com/C34v6.png" alt="Picture in transition state"></p>
  
  <p>Are there any ways to make this animation smooth like in Chrome? Or it's normal for IE 11?</p>