在Mozilla Firefox中使用CSS变换缩放的突然移动

Question

我在图像上使用变焦比例来悬停缩放。但是，当缩放动画完成时，图像稍微抖动。这只发生在Firefox中（我使用的是最新版本39.0，但此问题也出现在早期版本中）。我在Chrome中没有看到这个问题。

Here是JSFiddle。 代码如下：

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;
            }

感谢。