変換スケールを使用するときに揺れているテキスト

Question

ホバー上のボタンのサイズを調整しようとしていますが、これが完了すると、テキストが不安定に見えます。他の投稿を見て、-webkit-backface-visibility:hidden;、transform: translateZ(0);、-webkit-transform-style: preserve-3d;などの提案を試しましたが、うまくいきませんでした。ここで

はフィドルです：https://jsfiddle.net/ad7n17so/

.button { 
    margin-left: 30px; 
    background: #FF0000; 
    color: #FFFFFF; 
    padding: 0.4em; 
    width: 100px; 
    transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
} 
.button:hover { 
    -ms-transform: scale(1.25); /* IE 9 */ 
    -webkit-transform: scale(1.25); /* Chrome, Safari, Opera */ 
    transform: scale(1.25); 
} 

Answer 1

backface-visibility: hidden;状況を改善しますが、テキストレンダリングは変わっていません（Firefoxでは鮮明、Chromeではぼかし）。この問題は、パディングを削除し、代わりに大きな行の高さを利用して（主にChromeで）小さくなった：

.button { 
 
    background: tomato; 
 
    width: 100px; 
 
    -webkit-transition: 0.3s ease-in-out; 
 
    -moz-transition: 0.3s ease-in-out; 
 
    -o-transition: 0.3s ease-in-out; 
 
    transition: 0.3s ease-in-out; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    text-align: center; 
 
    line-height: 1.8em; 
 
} 
 

 
.button:hover { 
 
    -webkit-transform: scale(1.25); 
 
    -moz-transform: scale(1.25); 
 
    -o-transform: scale(1.25); 
 
    -ms-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
}

<div class="button">Test Button</div>

Answer 2

を（それが違いを作る場合、私は、Firefoxを使用しています）応答性をテストするために、ページのサイズを変更しながら、私はこれと同じことに気づきました。テキストはすべてぼやけただけでなく、いくつかの画像になります。私が知る限り、フォントが調整されているので、これを修正する方法はありません。フォントサイズのすべてのピクセルをアニメートする代わりに、アニメーションをトゥイーンにします。そのため、アニメーションの1秒ごとに明瞭に見えません。