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

Question

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

在这里 fiddle 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);
}

如果有人知道为什么会这样，我们将不胜感激