Firefox issue with scale and hardware accelerated transition

Question

This simple css animated transition works on chrome(27) but in firefox(21) jumps directly to the end. Classes are applied sequentially via js. Removing translateZ fixes firefox animation but I think it disables HW acceleration. Question is, could be a ff bug or css is wrong?

Fiddle here 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

SOLUTION:

Scaling to a non zero value, but small enough to hide the item, works fine on firefox (23).

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

It would be appreciated if someone know why it happens