CSS变换缩放使文本模糊

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，它可能会强制修正每个关键帧之间的模糊。

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”）;

并且最适合我。我在变换前需要-webkit-。我不知道为什么，正如其他人说不使用它。我使用一些不同的设置上传了它的外观图像。