css - Firefox 规模和硬件加速过渡的问题

Question

这个简单的 css 动画过渡适用于 chrome(27)，但在 firefox(21) 中直接跳转到末尾。类是通过 js 顺序应用的。删除 translateZ 修复了 firefox 动画，但我认为它会禁用硬件加速。问题是，可能是 ff 错误或 css 错误？

在这里摆弄 http://jsfiddle.net/geedmo/zUQax/

* {
    transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
}
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    transition: all .2s ease;
}
.box.scale {
    transform: scale(1);
    -webkit-transform: scale(1);
}
.box.scale.now {
    transform: scale(0);
    -webkit-transform: scale(0);
}
// JS
$('.box').click(function() {
    $(this).addClass('scale')
    this.offsetWidth
    $(this).addClass('now')
})

Answer 1

解决方案：

缩放到非零值，但小到足以隐藏项目，在 firefox (23) 上工作正常。

.box.scale.now {
  transform: scale(0.001);
  -webkit-transform: scale(0.001);
}

如果有人知道它为什么会发生，将不胜感激