CSS Matrix animation issue

Question

I've tried to create some matrices animation lately. But I noticed something weird. The following code works differently on Firefox, Safari and Chrome :

@-moz-keyframes matrix
{
    from 
    { 
       -moz-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
       -moz-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

@-webkit-keyframes matrix
{
    from 
    { 
        -webkit-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
        -webkit-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

Is there a way to fix this problem ?

Answer 1

It seems to be just a difference in the way Gecko and Webkit renders the matrix function, which is why they still have the experimental vendor prefixes. I say there is no clean cut way of "fixing" this issue, as it is entirely up to the rendering engine, so you may just have to tinker with the values to get equivalent results.