Jitter on DIV Hover with Internet Explorer 11 - html

Question

I just cant seem to fix this issue where on hover, the DIV expands and then shrinks giving a "jumpy" or "jitter" look. This only seems to happen in IE 11 and I cant pinpoint why.
I have a list which will be for images and I want the hover state to be a block that is 10px less than its parent;
Here is my fiddle:
Here is my code;
HTML
<div id="container">
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
</div>
CSS - the inner class is the one with the hover
#container {
padding: 5px;
margin: 0 auto;
border: 2px solid black;
}
.item {
display:block !important;
list-style:none;
float: left;
background: #CCC;
margin: 5px;
width: 50px;
height: 50px;
}
.item.w2 { width: 300px; }
.item.h2 { height: 200px; }
.inner {
background:#fff;
background: rgba(255, 255, 255, 1);
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
margin:0;
padding:0;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
.inner:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: .95;
z-index:1;
}
/* no transition on .isotope container */
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: .6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
opacity:.5;
}
Consequently the "jumpy" or "jitter" disappears when there is no -transition such as ease-in-out or opacity.
I appreciate anyone who has a look! any suggestions would be great this is a huge learning curve for me :)

Answer 1

I created a simplified example of this problem:
http://jsfiddle.net/DqUvL/14/
I also reported the problem to MSFT:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107987/
HTML:
<a class="bad" href="#">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="cat">
<div class="detail">
<h2>Heading</h2>
<div class="margin">
Margin
</div>
<div class="clear"></div>
</div>
</a><a class="bad" href="#">
<div class="detail">
<h2>Heading</h2>
<div class="clear"></div>
</div>
</a>
CSS:
.bad {
display: block;
outline: 1px solid blue;
}
.clear {
clear: both;
}
.bad:hover {
outline-color: red;
}
img {
float:left;
}
h2 {
margin: 0;
}
.margin {
margin: 1em 0;
}
I worked around the problem by adding a container style="overflow:hidden" around the hover elements:
http://jsfiddle.net/DqUvL/16/
This solves the simplified problem.
Thanks #mohitp:
https://stackoverflow.com/a/12665222/973470

Answer 2

I tested with IE 10. Seems that your divs are too big, because they have position: absolute.
Therefore they are aligned to the container. Add this to your item class:
.item {
position: relative;
}
Absolute elements are aligned to the next parent that is not static. It might be that IE's default stylesheet differs from the other browsers when it comes to list elements position. Did not checked this yet.