Firefox固定位置不具有Animate功能

Question

以下是我的问题的一个简单示例：https://jsfiddle.net/b700ja5a/1/

HTML

<input type="button" id="runTest" value="Run Test" />
<div id="fixPosTest">
  <div class="inner"></div>
</div>

CSS

#fixPosTest {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 200px;
    height: 200px;
    border: 2px solid #ff0000;
    z-index: 100;
    transition:left 1s linear;
}

#fixPosTest .inner {
  position: fixed;
  width: 200px;
  height: 100px;
  background-color: #ff99ff;
  z-index: 110;
}

JS（jQuery）

$('#runTest').on('click', function() {
    $('#fixPosTest').css({left: '50%'});
});

在Chrome PC 48中，粉红色框在红框内平滑动画。在Firefox PC 44中，粉红色的盒子会被留下，直到某些东西触发重绘。如果我让jQuery做动画而不是CSS，Firefox会遇到同样的问题。

知道发生了什么事吗？