Abrupt movement with CSS transform scale in Mozilla Firefox - html

Question

I am using transform scale on an image to zoom it on hover. However, when the zooming animation completes, the image jerks a bit. This is only happening in Firefox (I am using the latest version 39.0 but this issue was present in earlier versions as well). I don't see this problem in Chrome.
Here is the JSFiddle.
Code is as follows:
HTML
<div class="item-box">
<div class="category-item">
<div class="picture">
<a title="Show products in category Hats" href="/digital-downloads">
<img title="Show products in category Hats" src="http://s6.postimg.org/gyzzlqts1/hats1_350.jpg" alt="Picture for category Hats">
<div class="inset-shadow"></div>
</a>
</div>
<h2 class="title">
<a title="Show products in category Hats" href="/digital-downloads">
Hats
</a>
</h2>
</div>
</div>
CSS
.item-box:nth-child(2n+1) {
clear: none;
}
*, *::before, *::after {
box-sizing: border-box;
}
.item-box {
width: 313px;
height: 313px
}
.item-box {
margin: 0 0 80px;
}
.item-box {
float: left;
margin: 0 0 40px;
padding: 0 5px;
position: relative;
text-align: left;
}
.item-box .picture {
background-color: rgb(255, 255, 255);
margin: 0 0 20px;
overflow: hidden;
z-index: 1;
margin:0;
}
.item-box .picture a {
display: block;
position: relative;
background-color: rgb(255, 255, 255);
transition: all 0.4s linear 0s;
z-index: 10;
}
.item-box .picture a img {
margin: auto;
max-height: 100%;
max-width: 100%;
transition: all 0.6s linear 0s;
}
.item-box:hover .picture a img {
transform: scale(1.09);
}
a img {
opacity: 0.99;
}
a img {
border: medium none;
}
.inset-shadow {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.4s ease 0s;
}
.inset-shadow:hover {
box-shadow: 0 0 0 30px rgba(97, 91, 89, 0.35) inset;
}
Thanks.