CSS 变换缩放会使文字变得模糊。

Question

我有一个悬停效果，当它被触发时，方框会放大。唯一的问题是，在过渡期间文本似乎变得模糊，然后在“转换”时又变得清晰。

在发布之前，我决定进行研究，并找到了这篇文章，似乎也是我的问题：

如何在Safari中强制重新渲染WebKit 3D变换

http://duopixel.com/stack/scale.html

我已经尝试了他们的解答，但模糊效果仍然存在。我在下面提供了一个链接，如果有人能够建议我如何解决这个问题，那就太好了！

过渡代码示例：

-moz-transform:scale(1.05,1.05);

http://jsfiddle.net/VcVpM/1/

- user2212564

Answer 1

虽然它并不完全相等，但在:hover中设置width、height、left、top和font-size属性可以在Chrome上实现无模糊效果。

.cta:hover {
    width: 500px;
    height: 500px;
    font-size: 400%;
}

唯一的其他解决方法“可能”是使用动画@keyframes，并设置相当数量的关键帧，即5或10个，这可能会强制纠正每个关键帧之间的模糊。

- Louis Ricci

Answer 2

我在CSStricks.com上发现了这个内容：

如果你设置了转换，它似乎也会使用

translate3d( 0, 0, 0)

它可以修复它，但是在旋转/变换时会导致字体有点模糊。请参见此处：http://codepen.io/WillsonSmith/pen/4/2

我使用Jquery并需要修复我的滑块的H3标签。对我来说，较大的文本不会模糊。 我写了这行代码

$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px");

这对我来说是最好的解决方法。我需要在我的transform前面加上-webkit-。我不知道为什么，因为其他人说不要使用它。我上传了一张带有一些不同设置的图片。

- Karl Henselin