转换: scale() firefox文本问题

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，它起作用了。当使用小数位的数字进行缩放时，似乎存在一个问题。我将把这个bug报告给mozilla团队。

Answer 2

通过添加translateZ(0)，模糊效果似乎消失了。

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

这样，它就会强制执行2D转换。