Shaky Text bei der Verwendung von Transform-Skala

Question

Ich versuche, die Größe einer Schaltfläche bei Hover zu skalieren, aber wenn dies erledigt ist, sieht der Text wackelig. Ich schaute auf einige andere Beiträge und versuchte einige der Vorschläge, wie die Verwendung -webkit-backface-visibility:hidden;, transform: translateZ(0); und -webkit-transform-style: preserve-3d;, aber keiner schien zu funktionieren. Hier

ist die Geige: https://jsfiddle.net/ad7n17so/

(I Firefox verwenden, wenn das einen Unterschied macht)

.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; lassen Sie die Situation besser, aber das Text-Rendering bleibt seltsam (knackig bei Firefox, verschwommen bei Chrome). Dieses Problem wurde kleiner (in erster Linie auf Chrome), um die Polsterung zu entfernen und eine größere Zeilenhöhe anstelle:

.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

ich bemerkt habe diese gleiche Sache, während Seite Ändern der Größe Ansprechbarkeit zu testen. Der Text geht alle verschwommen, sowie einige Bilder. Soweit ich weiß, gibt es keine Möglichkeit, dies zu beheben, da sich die Schriftart anpasst. Anstatt jedes Pixel der Schriftgröße zu animieren, twistet es die Animation. Aus diesem Grund sieht es nicht jede Sekunde der Animation klar aus.