CSS变换缩放使文本模糊 [英] CSS Transform Scale makes text blurry

问题描述

我有一个悬停效果，当它被触发，框扩大。只有问题，我的文字似乎在过渡期间模糊，然后在变形时再次变得尖锐。

I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'.

在发布之前，我决定有一个研究和发现这个帖子，这似乎也是我的问题：

Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well:

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

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

我已经应用他们的答案我的构建，仍然模糊的效果发生。我已经在下面提供了一个链接，如果任何人可以建议我，我有可能解决这将是巨大的！

I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be great!

例如过渡代码：

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

http： //jsfiddle.net/VcVpM/1/

推荐答案

虽然不等效， left，top，font-size属性：hover在Chrome上没有模糊处理。

While it's not equivalent, setting the width, height, left, top, font-size attributes in the :hover works without the blurring on Chrome.

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

唯一的解决办法是使用animation @keyframes设置一个体面的数量〜5或10，它可能会强制纠正每个关键帧之间的模糊。

The only other work-around "might" be to use animation @keyframes and set a decent amount of them ~5 or 10, it might force a correction of the blurring between each keyframe.

这篇关于CSS变换缩放使文本模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！