转换：scale() Firefox 文本问题答案

【问题标题】：transform: scale() firefox text issue转换：scale() Firefox 文本问题
【发布时间】：2016-09-20 08:44:54
【问题描述】：

我想使用 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);
}

任何帮助都会很酷！

提前致谢

【问题讨论】：

标签： html css firefox css-transforms

【解决方案1】：

我尝试将其缩放到 2 并且它可以工作。使用具有小数位数的数字进行缩放时似乎存在问题。我将向 Mozilla 团队报告此错误。

【讨论】：

【解决方案2】：

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

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

这样会强制进行 2D 变换。

【讨论】：