IE11 Flexbox和CSS变换比例导致图像失真

Question

我有一个显示4个图像的网格，使用Flexbox将它们对齐到所有方向都居中的所有内容。当用户将鼠标悬停在图像上时，它会使用transform: scale(1.5)来放大图像。

Chrome和Firefox中的一切都很完美。但是当我在IE11中查看同一页面时，事情并没有那么顺利。

第一个问题是有时图像被扭曲（在应用任何变换之前），但只是刷新而不改变任何东西有时会修复它。

应用转换时会出现第二个（也就是更大的）问题，图像完全失真。

JS Fiddle Link Here

我已查看http://caniuse.com/#feat=flexbox而且我没有看到任何明显的问题......我很确定它是Flexbox问题，因为有时我会＆＃39 ; m在应用任何转换之前遇到问题。

编辑1

我注意到在min-width:1px;上添加img似乎可以解决缩放问题，但会抛弃鼠标移出中心。 JS Fiddle Update。

＆＃13;

＆＃13;

$("#kitty").hover(function() {
    $(this).css({
      'transform': 'scale(1.5)',
      'z-index': 1
    });
  },
  function() {
    $(this).css({
      'transform': 'scale(1)',
      'z-index': 0
    });
  }
);

＆＃13;

.img-container {
  padding: 4px;
  height: 100%;
  border: 5px;
  border-color: black;
  border-style: solid;
}

.top .img-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.bottom .img-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

.col-sm-6 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-inner {
  background-color: orange;
  height: 45vh;
  width: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row top">
  <div class="row-inner">
    <div class="col-sm-6">
      <div class="img-container">
        <img src="http://i63.tinypic.com/dqruoj.jpg" class="img-responsive" id="kitty">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="img-container">
        <img src="http://i64.tinypic.com/vrbhqx.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>
<div class="row bottom">
  <div class="row-inner">
    <div class="col-sm-6">
      <div class="img-container">
        <img src="http://i66.tinypic.com/2j0bn9e.jpg" class="img-responsive">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="img-container">
        <img src="http://i63.tinypic.com/35kivqw.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13; 的 BEFORE

鼠标悬停期间