transform: scale() firefox text issue

Question

Ich möchte mit CSS-Transformationen einen Text auf Hover auf eine andere Größe skalieren. Es funktioniert sehr gut in allen Browsern (sogar IE!), Aber Firefox hat ein seltsames Problem mit der Schriftart. Die Animation + Skala funktioniert, aber der Text im skalierten Element wird etwas unscharf und nach einigen Millisekunden wird es wieder scharf.

Ich machte eine einfache example, wo Sie es reproduzieren können.

HTML:

<div class="container"> 
    <div class="scale"> 
     Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. 
    </div> 
</div> 

CSS:

.container { 
    height: 300px; 
    width: 300px; 
    margin-left: 100px; 
    margin-top: 100px; 
} 

div.scale { 
    transition: 0.1s linear; 
} 

div.scale:hover { 
    transform: scale(1.5); 
} 

Jede Hilfe wäre cool!

Vielen Dank im Voraus

Answer 1

Ich habe versucht, es zu 2 und es funktioniert Skalierung. Es scheint ein Problem bei der Skalierung mit Zahlen mit Nachkommastellen zu bestehen. Ich werde diesen Fehler dem Mozilla-Team melden.

Answer 2

Es scheint, dass durch Hinzufügen von translateZ(0) der verschwommene Effekt verschwindet.

div.scale:hover { 
    transform: scale(1.5) translateZ(0); 
} 

Auf diese Weise erzwingt es eine 2D-Transformation.