IE11 Flexbox and CSS Transform scale causing image distortion - html

Question

I have a grid of 4 images displayed, using Flexbox to align them to everything is centered in all directions. When a user mouses over an image, it uses transform: scale(1.5) to enlarge the image.
Everything works perfect in Chrome and Firefox. But when I view the same page in IE11, things don't work so well.
The first problem is that sometimes the images are distorted (before applying any transformations), yet simply refreshing without changing anything will sometimes fix it.
The second (and bigger) problem comes when applying the transformation, the image is completely distorted.
JS Fiddle Link Here
I've Checked http://caniuse.com/#feat=flexbox and I'm not seeing anything obvious... I'm pretty sure it's a Flexbox issue, because there are times when I'm having issues before any transformation is applied.
EDIT 1
I've noticed that adding min-width:1px; on the img seems to fix the scaling issue, but throws off the centering on mouse-out. JS Fiddle Update.
$("#kitty").hover(function() {
$(this).css({
'transform': 'scale(1.5)',
'z-index': 1
});
},
function() {
$(this).css({
'transform': 'scale(1)',
'z-index': 0
});
}
);
.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;
}
<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>
BEFORE
During Mouse Over