transform：scale（）firefox text issue

Question

私は、css-transformsを使用して、ホバー上のテキストを別のサイズに拡大したいと考えています。それはすべてのブラウザ（IEでも可能）でうまく動作しますが、Firefoxはフォントに奇妙な問題があります。アニメーション+スケールは機能しますが、スケーリングされた要素のテキストは少し不鮮明になり、数ミリ秒後に再びシャープになります。

私は簡単にexampleを作りました。あなたはそれを再現できます。

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); 
} 

すべてのヘルプはクールになります！事前

Answer 1

で

おかげで私は2にそれをスケーリングしようと、それが動作します。小数点以下の桁数でスケーリングするときに問題があるようです。私はこのバグをmozillaチームに報告します。

Answer 2

translateZ(0)を追加すると、ぼかし効果が消失するように見えます。

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

このようにして、2D変換を強制します。