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
Domanda
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')
})
Soluzione
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