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变换。

transform：scale（）firefox文本问题

2 个答案: