CSS grayscale questions

Question

I have a few questions:

1. How to make grayscale in IE10? code below is not ie10 compatible.
2. FF doesn't do transitions at all. What am I doing wrong?
3. FF moves/jitter image to the left 1px on hover. Why?

Chrome and IE9 do everything correctly. Transitions ok, no img moving. Here's my css code:

.grayscale{

    -webkit-filter:grayscale(1);    /* Chrome 19+ & Safari 6+ */
/*  transition:-webkit-filter 1.3s; /* for chrome */

    filter:gray;    /* IE6-9 */
    /* Firefox 3.5+ */
    filter:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale'); /**/


    -webkit-transition:all 1.3s;
    -moz-transition:all 1.3s;
    -o-transition:all 1.3s;
    transition:all 1.3s;    /* for chrome */
/*  
    -webkit-transition:grayscale(1) 0.8s;

    -moz-transition:filter 0.8s;
    -o-transition:filter 0.8s;
    transition:filter 0.8s;
*/
}
.grayscale:hover{
    -webkit-filter:grayscale(0);    /* chrome*/
    filter:none;    /*ff, IE */
}