Css Firefox固定位置不'；不动

以下是我的问题的一个简单示例：

HTML

JS（jQuery）

在Chrome PC 48中，粉红色框在红色框内平滑地设置动画。在Firefox PC 44中，粉红色框会一直保留，直到有东西触发重新绘制。如果我让jQuery代替CSS制作动画，Firefox也会遇到同样的问题

知道发生了什么吗？

Bugzilla在这里跟踪：

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

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

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