CSS Transform Scale 使文本模糊

Posted 2023-03-06

【中文标题】CSS Transform Scale 使文本模糊

【英文标题】：CSS Transform Scale makes text blurry

【发布时间】：2013-08-02 19:49:41

【问题描述】：

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

在这里发帖之前，我决定进行一项研究，发现这篇文章似乎也是我的问题：

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/

【参考方案1】：

虽然它不是等效的，但在 :hover 中设置宽度、高度、左侧、顶部、字体大小属性可以在 Chrome 上不模糊。

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

唯一的其他解决方法“可能”是使用动画@keyframes 并将它们设置为大约 5 或 10 个，这可能会强制纠正每个关键帧之间的模糊。

【参考方案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- 在我的转换前。我不知道为什么，因为其他人说不要使用它。我上传了一张带有一些不同设置的图片。