CSS Transform Scale 使文本模糊

Question

我有一个悬停效果，当它被触发时，框会放大。我遇到的唯一问题是文本在转换过程中似乎变得模糊，然后在“转换”时再次变得清晰。

在这里发帖之前，我决定进行研究并发现了这篇帖子，这似乎也是我的问题:

How to force re-render after a WebKit 3D transform in Safari

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

我已将他们的答案应用到我的构建中，但仍然出现模糊效果。我在下面提供了一个链接，如果有人可以就我所拥有的可能解决的问题向我提出建议，那就太好了!

例如转换代码:

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

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

Answer 1

虽然不等同，但在 :hover 中设置宽度、高度、左侧、顶部、字体大小属性在 Chrome 上没有模糊效果。

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

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