CSS3变换随着过渡而旋转

Question

我使用：after伪元素用CSS创建了加号（+）。当单击包含元素时，我正在旋转（使用变换）加号（+）45度以生成（x）。再次单击包含元素时，（x）将返回（+）。

这可以正常工作，但是在转换完成后，水平线的位置会使（+）略微向下移动并且宽度变小。

看起来这只发生在Firefox中。

我创建了fiddle以显示我的意思。

以下是供参考的代码：

$('#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>

有什么建议吗？