CSS3 transform rotate with transition - css

Question

I've created a plus sign (+) with CSS using the :after pseudo element. When the containing element is clicked, I'm rotating (with a transform) the plus sign (+) 45 degrees to make an (x). When the containing element is clicked again, the (x) returns back to (+).
This works as expected, but it appears the position of the horizontal line that makes the (+) moves slightly down and the width gets smaller after the transform has completed.
It looks like this is only happening in Firefox.
I've created a fiddle to show what I mean.
Here is the code for reference:
$('#MobileProx').click(function() {
$('#MobileProx .RotateXWrap').toggleClass('Active');
return false;
});
#MobileProx {
position: relative;
top: 50px;
height: 20px;
display: block;
text-align: left;
padding: 2%;
color: #fff;
font-size: 1.5em;
background: #0099a8;
cursor: pointer;
}
#MobileProx .RotateXWrap {
transition: all 0.35s ease-in-out 0s;
-moz-transition: all .35s ease-in-out 0s;
-ms-transition: all .35s ease-in-out 0s;
-o-transition: all .35s ease-in-out 0s;
-webkit-transition: all .35s ease-in-out 0s;
}
#MobileProx .RotateXWrap {
float: right;
margin-right: 1%;
width: 20px;
height: 20px;
}
#MobileProx .RotateXWrap.Active {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#MobileProx .RotateX {
margin-left: 9px;
background: white;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 20px;
position: absolute;
width: 3px;
}
#MobileProx .RotateX:after {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: white;
content: "";
height: 3px;
left: -9px;
position: absolute;
top: 8.5px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MobileProx">Click here
<div class="RotateXWrap">
<span class="RotateX"></span>
</div>
</div>
Any suggestions?