Mozillaのスケーリング要素が正しく機能しない

Question

アプリケーションでアイコンを押すときに、効果を作成しようとしています（0.5秒でフェードインする色が丸くなります）。基本的に私はアクティブな擬似クラスを使用して、アイコンの上のスパンを2倍大きく丸めます。同時にアイコンを2倍小さくします（効果に対抗するため）。私はこれをChromeとIEでうまく動作させることができましたが、何とかMozillaは：アクティブな変換の終わりにアイコンを小さくします（ちょっとだけ）。どうすればこの問題を解決できますか？

.collapse-btn { 
    position: absolute; 
    bottom: 9; 
    right: 16; 
    background: $white; 
    border: none; 
    border-radius: 50%; 
    -moz-transition: background-color .5s linear; 
    -webkit-transition: background-color linear; 
    transition: background-color .5s linear; 

    &:active{ 
    -moz-transform: scale(2,2); 
    -webkit-transform: scale(2,2); 
    transform: scale(2,2); 
    background-color: #c7c7c7; 

    svg { 
     -moz-transform-origin: center center; 
     -webkit-transform: scale(0.5,0.5); 
     transform: scale(0.5,0.5); 
     -moz-transform: scale(0.5,0.5); 
    } 
} 
} 

Answer 1

解決済み！それはハックの大きいですが、働き... SVGクラスは、「アイコン」の場合：

svg.icon { 
     -moz-transform: scale(1,1) 
} 

何とか変換CSS属性はそうトリックを作り、同時に、ツリーのすべてのレベルに適用されていません最後に再スケーリングのような問題を解決することができます。